HTML5中CSS的重点属性介绍
2016-03-15 本文已影响64人
Alexander
RGBA透明度: RGB(红色R+绿色G+蓝色B),RGBA则在其基础上增加了Alpha通道，可用于设置透明值
-
1, 块阴影与圆角阴影
box-shadow text-shadow -
2, 圆角
border-radius -
3, 边框图片
border-image -
4, 形变
transform:none|<transform-function>[<transform-fuction>]
<!--CSS属性介绍-->
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS属性介绍</title>
<style>
div{
/*设置文字大小:px是像素*/
font-size: 30px;
width: 200px;
color: red;
background-color: cadetblue;
/*设置外边距:这里表示上右下左都是20px*/
margin: 20px;
/*也可以直接设置它们的不透明度*/
/*opacity: 0.2;*/
/*设置阴影:水平和垂直阴影的位置是必填的,后面的可选*/
box-shadow:10px 10px 10px red;
}
/*设置透明度的渐变效果*/
/*.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;
/*设置圆角*/
/*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开发工程师是需要学习很多语言的</div>
</body>
</html>
