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; } }