一些俏皮的css样式

文字渐变

color: #c99d58;
background: -webkit-linear-gradient(15deg, #c99d58,#feeac2 50%,#be985c) repeat center / 375px 100%;
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

固定背景

background-attachment: fixed;

相对居中


fixed
{left：0；
right：0；
margin：0 auto；}

文字描边

H5：

<p data-text="对应">对应</p>

CSS：

p{font-size: 36px;
font-weight: bold;
color: white;
text-align: center;
padding-top: 50px;
position: relative;
z-index: 1;
letter-spacing: 2px;
}p::before{content:attr(data-text);
color: white;
position: absolute;
z-index: -1;
-webkit-text-stroke: 6px #0072bc;
text-shadow: 0px 4px 8px #1486b3;
}

旋转

transform:rotate(7deg);

文字强制不换行，并且多出文字用…代替

white-space: nowrap;
text-overflow: ellipsis;

文字横排

writing-mode: horizontal-tb;

一些俏皮的css样式相关推荐

内联式css样式，直接写在现有的HTML标签中
CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种.这一小节先来讲解内联式. 内联式css样式表就是把css代码直接写在现有的HTML标签中 ...
css样式之边框和内外边距
1.css样式之边框:border 实心的边框: <!DOCTYPE html> <html> <head> <meta http-equiv="c ...
CSS（2 ）-- CSS样式大全
常用css样式大全Author:xu_shuyi201504039.CSS颜色代码大全http://www.cnblogs.com/axing/archive/2011/04/09/CSS.html1 ...
MOSS的CSS样式说明，一个老外总结的
MOSS的CSS样式说明,一个老外总结的 http://www.heathersolomon.com/content/sp07cssreference.htm 转载于:https://www.cnbl ...
float属性html,详解CSS样式中的float属性
详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的fl ...
一个DIV调用多个CSS样式
1使用以上两个CSS样式表对描述同一个DIV的写法class利用class可以对于同一个标签多重定义样式. 比如用1.2两种样式同时控制一个DIV,可以写成以下格式: <div class=&q ...
关于CSS样式浏览器兼容问题的一些注意事项
CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不 ...
asp.net 控制页面css样式
asp.net 控制页面css样式 fontDiv.Style["display"] = "none"; fontDiv.Style["dis ...
Web前端开发最佳实践（8）：还没有给CSS样式排序？其实你可以更专业一些
前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...

一些俏皮的css样式

文字渐变

固定背景

相对居中

文字描边

旋转

文字强制不换行，并且多出文字用…代替

文字横排

一些俏皮的css样式相关推荐

最新文章

热门文章