-
CSS3 结构性伪类选择器—target
查看全部 -
CSS3 结构性伪类选择器—empty
查看全部 -
CSS3 结构性伪类选择器—not
查看全部 -
CSS3 结构性伪类选择器—root
查看全部 -
CSS3选择器 属性选择器
在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。
在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示：
查看全部 -
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS制作立体导航</title>
<link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">
<style>
body{
background: #ebebeb;
}
.nav{
width:560px;
height: 50px;
font:bold 0/50px Arial;
text-align:center;
margin:40px auto 0;
background: #f65f57;
border-radius:10px;
box-shadow:0px 8px 0px #900;
/*制作圆*/
/*制作导航立体风格*/
}
.nav a{
display: inline-block;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.nav a:hover{
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
-o-transform:rotate(10deg);
-ms-transform:rotate(10deg);
transform:rotate(10deg);
} .nav li{
position:relative;
display:inline-block;
padding:0 16px;
font-size: 13px;
text-shadow:1px 2px 4px rgba(0,0,0,.5);
list-style: none outside none;
}
/*使用伪元素制作导航列表项分隔线*/
.nav li::before,.nav li::after{
content:"";
position:absolute;
top:14px;
height: 25px;
width: 1px;
}
.nav li::after{
right: 0;
background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
}
.nav li::before{
left: 0;
background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
}
/*删除第一项和最后一项导航分隔线*/
.nav li:first-child::before{
background: none;
}
.nav li:last-child::after{
background: none;
}
.nav a,
.nav a:hover{
color:#fff;
text-decoration: none;
} </style>
</head>
<body>
<ul class="nav">
<li><a href="">Home</a></li>
<li><a href="">About Me</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Resources</a></li>
<li><a href="">Contact Me</a></li>
</ul>
</body>
</html>查看全部 -
多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。
语法缩写如下：
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
可以把上面的缩写拆解成以下形式：
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN; backround-position : position1,position2,...,positionN; background-size : size1,size2,...,sizeN; background-attachment : attachment1,attachment2,...,attachmentN; background-clip : clip1,clip2,...,clipN; background-origin : origin1,origin2,...,originN; background-color : color;
注意：
用逗号隔开每组 background 的缩写值；
如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
background-color 只能设置一个。
查看全部 -
语法：
background-size: auto | <长度值> | <百分比> | cover | contain
取值说明：
1、auto：默认值，不改变背景图片的原始高度和宽度；
2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
查看全部 -
CSS3背景 background-clip
用来将背景图片做适当的裁剪以适应实际需要。
语法：
background-clip ： border-box | padding-box | content-box | no-clip
参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。
backgroud-clip默认值为border-box。效果如下图所示：
查看全部 -
SS3背景 background-origin
设置元素背景图片的原始起始位置。
语法：
background-origin ： border-box | padding-box | content-box;
参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。
效果如下：
需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。
查看全部 -
column-count属性主要用来给元素指定想要的列数和允许的最大列数：
column-count:auto|integer
auto:此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。
<integer>：此值为正整数值，主要用来定义元素的列数，取值为大于的整数，负值无效
查看全部 -
colums:每列的宽度 列数
查看全部 -
animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：
none：默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards：表示动画在结束后继续应用最后的关键帧的位置。
backwords：会在向元素应用动画样式时迅速应用动画的初始帧
both：元素动画同时具有forwards和backwords效果
查看全部 -
animation-direction属性主要用来设置动画播放方向，其语法规则如下：
animation-direction:normal|alternate
normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；
另一个值是alternate，他的作用是，动画播放在第偶次数向前播放，第奇次数向反方向播放。
查看全部
举报