背景:每天進步一點點,多積累一點點.就會越來越棒
代碼:
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>棒棒糖</title> <h3>用css畫一個棒棒糖</h3> <p>要求:</p> <p>1:棒棒糖中間文字為水平居中</p> <p>2:不得少于三層顏色</p><style> .round{ width: 100px; height: 100px; background-color: #e5e7e9; position: relative; text-align: center; margin: 100px; font: italic bold 17px/100px arial,sans-serif; box-shadow: 0 0 0 10px #4286b4, 0 0 0 20px #fc052e, 0 0 0 30px #FBDD00, 0 0 0 40px #00BDFB; border-radius: 200px; color: #ffffff; } .bangbang{ width: 20px; height: 150px; margin: -80px 0px 0px 142px; background-color: #00BDFB; border-radius: 10px; }</style></head><body> <div class="round"> hello world! </div> <div class="bangbang"></div></body></html>效果圖:
今天積累到的知識:
1:關于font的縮寫
font-style:italic;font-variant:small-caps;font-weight:bold;font-size:12px;line-height:1.5em;font-family:arial,verdana;
可以寫成:
font: italic bold 17px/100px arial,sans-serif;
17px代表:font-size
100px代表:line-height
使用簡寫需要注意的地方:
1:font-size和line-height只能通過斜杠/組成一個值，不能分開寫。
2:順序不能改變.這種簡寫方法只有在同時指定font-size和font-family屬性時才起作用。而且，如果你沒有設定font-weight, font-style, 以及 font-varient ，他們會使用缺省值
2:關于居中
用了最簡單的文字高度與div高度相同,在設置text-align:center.如果不設置font就設置line-height:100px;也是可以達到文字居中的效果
3:關于邊框
我用的是box-shadow屬性,這個屬性可以設置多個值.比較適合我現在的場景.如果是值需要兩層,或者一層,可以直接設置boder或者兩個div嵌套或者outline屬性.
總結
以上所述是小編給大家介紹的css畫一個棒棒糖的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
