RGBA透明度: RGB(紅色R+綠色G+藍色B),RGBA則在其基礎(chǔ)上增加了Alpha通道,可用于設(shè)置透明值
1, 塊陰影與圓角陰影
box-shadow text-shadow2, 圓角
border-radius3, 邊框圖片
border-image4, 形變
transform:none|<transform-function>[<transform-fuction>]
<!--CSS屬性介紹-->
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS屬性介紹</title>
<style>
div{
/*設(shè)置文字大小:px是像素*/
font-size: 30px;
width: 200px;
color: red;
background-color: cadetblue;
/*設(shè)置外邊距:這里表示上右下左都是20px*/
margin: 20px;
/*也可以直接設(shè)置它們的不透明度*/
/*opacity: 0.2;*/
/*設(shè)置陰影:水平和垂直陰影的位置是必填的,后面的可選*/
box-shadow:10px 10px 10px red;
}
/*設(shè)置透明度的漸變效果*/
/*.Alex1{*/
/*background-color: rgba(168,0 ,0 ,1.0);*/
/*}*/
/*.Alex2{*/
/*background-color: rgba(168,0 ,0 ,0.7);*/
/*}*/
/*.Alex3{*/
/*background-color: rgba(168,0 ,0 ,0.4);*/
/*}*/
/*.alex4{*/
/*background-color: rgba(168,0 ,0 ,0.2);*/
/*}*/
/*.alex5{*/
/*background-color: rgba(168,0 ,0 ,0.1);*/
/*}*/
p{
color: cornflowerblue;
text-shadow: 10px 8px 5px cornflowerblue;
}
.William{
color: red;
width: 250px;
font-size: 20px;
height: 300px;
background-color: green;
/*設(shè)置圓角*/
/*border-radius: 50px;*/
border-bottom-left-radius: 50px;
border-top-right-radius: 50px;
}
</style>
</head>
<body>
<div class="Alex1">WilliamAlex</div>
<div class="Alex2">WilliamAlex</div>
<div class="Alex3">WilliamAlex</div>
<div class="Alex4">WilliamAlex</div>
<div class="Alex5">WilliamAlex</div><br>
<p></p>
<p>一個合格的程序員需要不停的追求新知識</p><br><br>
<div class="William">一個合格的iOS開發(fā)工程師是需要學(xué)習(xí)很多語言的</div>
</body>
</html>