CSS3--多列布局、邊框顏色、圓角、漸變效果、陰影反射


多列布局(multi-column layout)

   <style>
.div{
width:60%;
column-count:3;
column-rule:1px solid black;
column-gap:2em;
}

</style>
<div class="div">
列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條列與列之間的間隔條
</div>

這里寫圖片描述
column-count:布局幾列
column-rule:列與列之間的間隔條的樣式
column-gap:列與列之間的間隔
為了考慮兼容性一般都會:
-webkit-column-count: 3;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;
加上瀏覽器內核前綴。

邊框和顏色

rgb和rgba
R:紅色值。正整數 | 百分數

G:綠色值。正整數 | 百分數

B:藍色值。正整數| 百分數

A:透明度。取值0~1之間

background-color:rgb(255,0,0)
background-color:rgba(255,0,0,0.8)

a為透明度0.8代表百分之80%透明度

HSLA
H:Hue(色調)。0(或360)表示紅色,120表示綠色,240表示藍色,也可取其他數值來指定顏色。取值為:0 - 360
S:Saturation(飽和度)。取值為:0.0% - 100.0%
L:Lightness(亮度)。取值為:0.0% - 100.0%
A:Alpha透明度。取值0~1之間。

圓角
border-radius:整數 | 百分數
eg:一個div為200PX的正方形

border-radius:100px
border-radius:50%

都會使正方形變成圓形(圓角到極限了),並且當超過50%之后不會再有任何變化。

漸變效果(gradient)
因為我不經常用暫時沒有嘗試(有點任性0.0),不過推薦一篇很全面的文章:https://www.w3cplus.com/content/css3-gradient

陰影(shadow)

text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);

4個參數
h-shadow:必須,水平陰影的位置,可為負
v-shadow:必須,垂直陰影的位置,可為負
blur: 模糊的距離(陰影模糊的半徑)
color:陰影顏色

.div1{
width:200px;
height:200px;
background-color:black;
box-shadow:50px 100px 10px red;
}
.div2 span{
font-size:20px;
text-shadow:3px 3px 3px red;
}
<div class="div1"></div>
<div class="div2" style="margin-top:50px;">
<span>hello world</span>
</div>

這里寫圖片描述

從上圖可以看出來,水平和豎直陰影的位置,其實就是陰影相對於原位置的移動,陰影並不會占據任何margin padding 或者width height,對其他元素也不會造成影響(不會改變其他的位置,div2沒有因為div1的陰陽而被擠下來),它更像是背景。

反射
box-reflect
有三個參數,分別為direction offset mask-box-image
看個栗子

.classReflect{ 
-webkit-box-reflect: below 10px -webkit-gradient(linear, left top,left bottom,from(transparent), to(rgba(255, 255, 255, 0.51)));
}

direction:
1.above:指定倒影在對象上邊
2.below:在對象下邊
3.left:在左邊
3.right:在右邊
offset:
1.length:用長度定義倒影與對象之間的間隔 可為負
2.precentage:百分比表示 可為負
mask-box-img:
1.url:使用絕對或相對地址指定遮罩圖像
2.linear-gradient: 使用線性漸變創建遮罩圖像
3.radial-gradient:使用徑向(放射性)漸變創建遮罩圖像。
4.repeating-linear-gradient:使用重復的線性漸變創建背遮罩像
5.repeating-radial-gradient:使用重復的徑向漸變創建遮罩圖像
現在來解釋下上面代碼:倒影在對象下邊,與對象之間的間隔為10px,漸變方式為從上到下變化。
這里寫圖片描述


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com