本文深入探讨CSS的各种高级应用技巧，包括文本和字体处理、多列布局、阴影效果、背景图片设置、过渡动画以及响应式设计等，帮助读者掌握复杂网页样式的实现方法。
-webkit-、-moz-、-o-、-ms-这四个前缀
-ms代表ie内核识别码
-moz代表火狐内核识别码
-webkit代表谷歌内核识别码
-o代表欧朋【opera】内核识别码
设置文字溢出隐藏，超出的用省略号显示
p{
text-overflow: ellipsis;
overflow: hidden;
height: .8rem;
white-space: nowrap;
}
引用自己的字体
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'), url('Sansation_Light.woff').div4 {
/**
多行文本溢出使用了webkit的css扩展属性，只是用于webkit浏览器以及移动端
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display:-webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
*/
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
width: 500px;
border: 1px solid red;
}文本装饰：
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
文本转换
p {text-transform:uppercase;}
p{text-transform:lowercase;}
p{text-transform:capitalize;}
把段落设置为小型大写字母字体
font-variant:small-caps
font-variant:inherit 继承父元素的font-variant属性值给段落第一个单词设置样式
p:first-letter{
color:#ff0000;
font-size:xx-large;
}
给段落第一行设置样式
p:first-line{
color:#0000ff;
font-variant:small-caps;
}指定字符间的间距
letter-space:2px;
指定行间距
line-height:100px;
指定单词间的空白空间
word-spacing:50px;
禁止文本换行
white-space:nowarp;
给文本添加阴影
text-shadow：2px 2px 2px #ff0000;(水平距离，垂直距离，模糊距离，颜色)链接样式：必须按顺序
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */关于元素背景
background-color
background-image
background-repeat
background-attachment 背景图片位置 可固定fixed
background-position
background:#ffffff url('img_tree.png') no-repeat right top;
关于列表标记
ul.a {list-style-type: circle;} 空心圆
ul.b {list-style-type: square;} 实心方形
ol.c {list-style-type: upper-roman;} 罗马
ol.d {list-style-type: lower-alpha;} a,b,c
设置标记为图片
ul{list-style-image: url('sqpurple.gif');}
ul{list-style: square url("sqpurple.gif");}
如果使用缩写属性值的顺序是：
list-style-type
list-style-position (有关说明，请参见下面的CSS属性表)
list-style-image
设置标记为图片浏览器兼容写法
ul { list-style-type: none; padding: 0px; margin: 0px; }
ul li { background-image: url(sqpurple.gif);
background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; }
<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>设置图片透明度：
opacity:.4; /后代元素会继承父元素的opacity
filter:alpha(opacity=40) //适用于IE8及更早版本
css3系列 css盒阴影 div{box-shadow: 10px 10px 5px #888888;} 边界图片： #round{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round; }
#stretch{
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
} 背景图可以有多个： #example1 {background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; }
background-clip属性： background-clip: padding-box; background-clip: content-box; background-clip: border-box; background-clip: text; -webkit-background-clip:text;只显示文字部分，此时还得设置 -webkit-text-fill-color:transparent css3线性渐变： 1、从上到下的线性渐变 #grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 标准的语法 */ } 2、从左到右的渐变 #grad { background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, red , blue); /* 标准的语法 */ } #grad { background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */} 4、重复的线性渐变 #grad { /* Safari 5.1 - 6.0 */ background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */ background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */ background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法 */ background: repeating-linear-gradient(red, yellow 10%, green 20%); } css3径向渐变 1、颜色节点均匀分布 #grad { background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */ background: radial-gradient(red, green, blue); /* 标准的语法 */ } 2、颜色节点不均匀分布 #grad { background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */ background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */ } 3、设置径向渐变的形状（ellipse：椭圆(默认)，circle：圆形） #grad { background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */ background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */} 4、重复的径向渐变 #grad { /* Safari 5.1 - 6.0 */ background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */ background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15 */ background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* 标准的语法 */ background: repeating-radial-gradient(red, yellow 10%, green 15%);}
css3 2D转换 div{transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ } 
css3 过渡 div{ height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s
｝ div:hover{ width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg); } 
css3动画 1.自定义动画名： @keyframes myfirst{ from {background: red;} to {background: yellow;} }
from {background: red;} to {background: yellow;} } @-moz-keyframes myfirst /* Firefox */ @-o-keyframes myfirst /* Opera */
2.animate属性 div{ animation: myfirst 5s linear 2s infinite alternate; /* Safari 与 Chrome: */ -webkit-animation: myfirst 5s linear 2s infinite alternate;}/*依次是：动画名、动画持续时间、动画运行速度、动画延迟时间、是否无限循环、是否逆向运动 
css3多列 div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3; /*将文本分为3列*/
} 
设置元素是否可让用户调整： resize:both（宽高均可调整）/none/horizontal(可调整宽度)/vertical(可调整高度) 设置图片为缩略图：img {border: 1px solid #ddd;border-radius: 4px;padding: 5px;}
多媒体查询： @media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
} @media screen and (max-width: 1000px) and (min-width: 700px)｛｝
扫一扫
687
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
