css3可以實現什么?
圓角,陰影,動畫...
選擇器:
>:孩子選擇器:例子:div>b{color:red}(div下孩子b顏色為紅色)
~:兄弟 選擇器:例子:div~b{color:red}(div下的兄弟為紅色)
例子一:
英文換行屬性:--博客園老牛大講堂
word-break: break-all;//設置英文字體換行
效果圖:

代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 150px; height: 100px; border: 1px solid #FF0000; word-break: break-all;//設置英文字體換行 } </style> </head> <body> <div class="div1"> sadfasdfasdassssssssssssssssssss </div> </body> </html>
例子二:--博客園老牛大講堂
H5引用好看字體的方法,以及文字的陰影效果:(通常一些網站可以讓字體變的好看,他們是怎樣做到的呢?)
1、首先百度:字體下載或者:訪問:http://font.chinaz.com/進行下載。解壓之后如圖所示

2、把解壓后端Monster.ttf文件拷貝到自己工程下,其中工程名字Css3,引用方法如圖所示。

代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style type="text/css"> @font-face { font-family: myfont;//自己命名 src: url("../font/Monster.ttf"); } .div_1 { margin-bottom: 20px; font-size: 2em; width: 500px; height: 20px; font-family: myfont; text-shadow: 2px 2px 5px red;//給文字加陰影效果,參數意思(x軸偏移量,y軸偏移量,陰影的長度,陰影的顏色) } </style> <body> <div class="div_1">CHINAZ</div> <div>CHINAZ</div> </body> </html>
