使用css3进行增强
生活随笔
收集整理的這篇文章主要介紹了
使用css3进行增强
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? 使用css3進行增強
1,為元素創建圓角
border-radius:25px;
.about img{border: 5px solid #bebebe;float: left;margin-right: 5px; border-radius: 10px; }border-radius的屬性值也和margin,padding,border 一樣可以有1
~4個,其代表的上下左右也是一樣的。
border-top-left-radius:r;(左上,同理可以分別創建四個不同的圓角)
2,為文本添加陰影
1 h1 2 { 3 text-shadow: 5px 5px 5px #FF0000; 4 } 5px 5px 5px #FF0000; 分別代表水平偏移量,垂直偏移量,模糊半徑(必須是正整數),顏色可對文本添加多重陰影:text-shadow: 5px 5px 5px #FF0000,2px 8px 56x #fff;
改回默認值:text-shadow: none;
text-shadow屬性是繼承的。
3,為元素添加陰影
box-shadow:inset;spread;(有兩個屬性可以選擇)
box-shadow可以接受六個值:水平偏移量,垂直偏移量,模糊半徑(必須是正整數)(可選),inset(可選,創建內陰影),spread(可選,創建外陰影),顏色
也可以多重陰影,和文本多重陰影類似。
改回默認值和文本陰影類似。
box-shadow屬性是不繼承的。
4,應用多重背景
為單個元素應用多重背景:
background-color:b,
background-imge:u, (u為圖形引用的相對或據對URL)
background-position:p,(p是成對的x-offset和y-offset 可正可負)
background-repeat:r;(repeat-x,repeat-y,no-repeat,用逗號隔開,分別對應imge中的u的每個url)
5,使用漸變背景
background:silcer;
background:linear-gradient(to right,silver,black);(從左往右,從銀色到黑色。top right,bottom right。可以從四面八方變過來)
a、創建備用背景色:background:color;
b、定義線性漸變:background:linear-gradient(to top.....(等多方位都可以變化),角度值,顏色);
c、定義徑向變化:background:radial-gradient(變換形狀,漸變尺寸,size(如果只有一個值,不能用分數),變換位置,指定顏色); 6,為元素設置不透明度
oparity:0;(0表示元素的不透明度,一般為兩位小數,不帶單位)
使用sprite拼合圖像 ? ?
轉載于:https://www.cnblogs.com/lal-fighting/p/5078772.html
總結
以上是生活随笔為你收集整理的使用css3进行增强的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: cms的使用与总结
- 下一篇: leetcode - Populatin