border-radius：允许向元素添加圆角
<style type="text/css">
#r1{
border-radius:25px;
background:blue;
padding:20px;
width:200px;
height:150px;
}
#r2{
border-radius:25px;
border:2px solid green;
padding:20px;
width:200px;
height:150px;
}
#r3{
border-radius:25px;
background:url("img/1.jpg");
background-position:left top;
background-repeat:repeat;
padding:20px;
width:200px;
height:150px;
}
</style>
</head>
<body>
<form action="" id="myform" >
<p>border-radius </p>
<p>指定背景颜色圆角</p>
<p id="r1">圆角</p>
<p>指定边框元素圆角</p>
<p id="r2">圆角</p>
<p>指定背景图片圆角</p>
<p id="r3">圆角</p>
</form>
</body>
box-shadow：阴影
<style type="text/css">
#div1{
width:200px;
height:100px;
background:yellow;
box-shadow:10px 10px 5px 5px gray;/* 阴影*/
}
#div2{
width:200px;
height:100px;
background:yellow;
box-shadow:10px 10px 5px 5px inset;/* 阴影 inset内阴影*/
}
</style>
</head>
<body>
<div id="div1">
外阴影
</div>
<div id="div2">
内阴影
</div>
</body>
设置多层阴影
box-shadow:10px 10px 5px 5px gray,15px 15px 5px 5px blue,20px 20px 5px 5px gray;/* 多层阴影*/
border-image属性用于设置图片边框
<style type="text/css">
div{
width:250px;
padding:10px 20px;
border:15px solid transparent;
}
#round{
-webkit-border-image:url("img/1.jpg") 30 30 round; /* -webkit是google浏览器内核支持所需要 ,round是平铺的意思*/
-o-border-image:url("img/1.jpg")30 30 round;/* -o是Opera浏览器内核支持所需要的前缀*/
border-image:url("img/1.jpg")30 30 round;
}
#stretch{
-webkit-border-image:url("img/1.jpg") 30 30 stretch; /* -webkit是google浏览器内核支持所需要 stretch是拉伸 */
-o-border-image:url("img/1.jpg")30 30 stretch;/* -o是Opera浏览器内核支持所需要的前缀*/
border-image:url("img/1.jpg")30 30 stretch;
}
</style>
</head>
<body>
<p>border-image属性用于设置图片的边框</p>
<div id="round">
这里图像平铺来填充该区域
</div>
<br>
<div id="stretch">
这里图片拉伸以填充该区域
</div>
<p>这里是我们使用的图片素材</p>
<img src="img/1.jpg">
文字加倒影：
p{
font-size:36px;
-webkit-box-reflect:below -10px;
-webkit-linear-gradient:(top,transparent 50%,#FFFFFF);/* 浏览器可能不支持*/
}
自定义字体：
@font-face{
font-family:myfristFont;/* 添加的字体名字*/
src:url('Scansation_Light.ttf');
}
div{
font-family:myfirstFont;
font-weight:bold;
}
英文单词过长时换行
.text1{
width:11em;
border:1px solid green;
}
.text2{
width:11em;
border:1px solid yellw;
word-wrap:break-word;/* 对过长单词且超过边框的进行换行 */
}
文字过长的省略方式
div{
white-space:nowrap;/*一行显示*/
width:12em;
overflow:hidden;
border:1px solid green;
}
.div1{
text-overflow:ellipsis;/*超出部分以省略号显示，以单词为界限*/
}
.div2{
text-overflow:clip;/* 直接截断*/
}
scale进行缩放和增大
div{
width:100px;
height:75px;
background:green;
}
.div1{
margin:100px;
transform:scale(2,4);
-ms-transform:scale(2,4);
-webkit-transform:scale(2,4);
}
skew倾斜：
div{
width:100px;
height:100px;
margin:100px;
background:blue;
}
.div2{
margin:100px;
transform:skew(30deg,20deg);/*水平方向偏转 垂直方向偏转*/
-ms-transform:skew(30deg,20deg);
-webkit-transform:skew(30deg,20deg);
}
rotate旋转
div{
width:100px;
height:100px;
border:1px solid red;
background:blue;
}
.div2{
float:left; transform-origin:10px 10px;/*设置旋转的与圆心点也可以是 top left*/
transform:rotate(20deg);
-ms-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
}
移动translate；使用此样式进行移动并不会影响别的元素
div{
width:100px;
height:100px;
border:1px solid red;
background:blue;
}
.div2{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px);
-webkit-transform:translate(50px,100px);
}
3D旋转
div{
width:100px;
height:100px;
border:1px solid red;
background:blue;
}
.div1{
transform:rotateX(120deg);
-ms-transform:rotateX(120deg);
-webkit-transform:rotateX(120deg);
transform:rotateY(120deg);
-ms-transform:rotateY(120deg);
-webkit-transform:rotateY(120deg);
transform:rotateZ(120deg);
-ms-transform:rotateZ(120deg);
-webkit-transform:rotateZ(120deg);
}
.div2{
transform:rotateY(120deg);
-ms-transform:rotateY(120deg);
-webkit-transform:rotateY(120deg);
}
.div3{
transform:rotateZ(120deg);
-ms-transform:rotateZ(120deg);
-webkit-transform:rotateZ(120deg);
}
过渡属性
div{
width:200px;
height:200px;
border:1px solid red;
background:blue;
transition:width 2s,background 2s;/* 过渡的属性与时间*/
-ms-transition:width 2s,background 2s;
-webkit-transition:width 2s,background 2s;
}
div:hover{
width:600px;
background:yellow;
}
过渡属性
div{
width:200px;
height:200px;
border:1px solid red;
background:blue;
}
.div1{
transition-property:width;/* 过渡属性*/
transition-duration:1s;
transition-timing-function:linear;/*过渡的过程中速度是一样的*/
transition-delay:0s;
-webkit-transition-property:width;/* 过渡属性*/
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;/*过渡的过程中速度是一样的*/
-webkit-transition-delay:0s;
}
.div2{
transition:width 1s linear 0s;/* 过渡的属性与时间*/
-ms-transition:width 1s linear 0s;
-webkit-transition:width 1s ease 0s;
}
div:hover{
width:300px;
bcakground:red;
}
多列布局
div{
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
}
多列布局间距
div{
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
-moz-column-gap:40px;/*设置间隔*/
-webkit-column-gap:40px;
column-gap:40px;
}
多列布局添加分隔栏
div{
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
-moz-column-rule:4px dotted blue ;/*设置宽度 样式(dotted/outset) 颜色*/
-webkit-column-rule:4px dotted blue;
column-rule:4px dotted blue;
}
创建动画
div{
width:200px;
height:200px;
background:yellow;
animation:myfrist 5s;/*引入创建的关键帧 和播放时间*/
-webkit-animation:myfrist 5s;
}
@keyframes myfrist{/*创建一个关键帧 从什么到什么*/
from{background:#ffff00;}
to{background:red;}
}
@-webkit-keyframes myfrist{
from{background:#ffff00;}
to{background:red;}
}
创建动画2
div{
width:200px;
height:200px;
background:yellow;
position:relative;
margin-left:0px;
animation:myfrist 5s;/*引入创建的关键帧 和播放时间*/
-webkit-animation:myfrist 5s;
}
@keyframes myfrist{/*创建一个关键帧 从什么到什么*/
0%{
background:red;
left:200px;
top:0px;
}
25%{
background:yellow;
left:200px;
top:0px;
}
50%{
background:blue;
left:200px;
top:200px;
}
75%{
background:green;
left:0px;
top:200px;
}
100%{
background:red;
left:0px;
top:0px;
}
}
@-webkit-keyframes myfrist{
0%{
background:red;
left:200px;
top:0px;
}
25%{
background:yellow;
left:200px;
top:0px;
}
50%{
background:blue;
left:200px;
top:200px;
}
75%{
background:green;
left:0px;
top:200px;
}
100%{
background:red;
left:0px;
top:0px;
}
}
来源：https://www.cnblogs.com/wujieBlogs/p/5903729.html