border-radius：允许向元素添加圆角
<style type="text/css"> #r1{ border-radius:25px; background:blue; padding:20px; 200px; height:150px; } #r2{ border-radius:25px; border:2px solid green; padding:20px; 200px; height:150px; } #r3{ border-radius:25px; background:url("img/1.jpg"); background-position:left top; background-repeat:repeat; padding:20px; 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{ 200px; height:100px; background:yellow; box-shadow:10px 10px 5px 5px gray;/* 阴影*/ } #div2{ 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{ 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{ 11em; border:1px solid green; } .text2{ 11em; border:1px solid yellw; word-wrap:break-word;/* 对过长单词且超过边框的进行换行 */ }
文字过长的省略方式
div{ white-space:nowrap;/*一行显示*/ 12em; overflow:hidden; border:1px solid green; } .div1{ text-overflow:ellipsis;/*超出部分以省略号显示，以单词为界限*/ } .div2{ text-overflow:clip;/* 直接截断*/ }
scale进行缩放和增大
div{ 100px; height:75px; background:green; } .div1{ margin:100px; transform:scale(2,4); -ms-transform:scale(2,4); -webkit-transform:scale(2,4); }
skew倾斜：
div{ 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{ 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{ 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{ 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{ 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{ 600px; background:yellow; }
过渡属性
div{ 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{ 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{ 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{ 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; } }