HTML5中CSS的重點屬性介紹

RGBA透明度: RGB(紅色R+綠色G+藍色B),RGBA則在其基礎(chǔ)上增加了Alpha通道,可用于設(shè)置透明值

  • 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{

/*設(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>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 各種純css圖標 CSS3可以實現(xiàn)很多漂亮的圖形,我收集了32種圖形,在下面列出。直接用CSS3畫出這些圖形,要比...
    劍殘閱讀 9,700評論 0 8
  • 1、垂直對齊 如果你用CSS,則你會有困惑:我該怎么垂直對齊容器中的元素?現(xiàn)在,利用CSS3的Transform,...
    kiddings閱讀 3,207評論 0 11
  • 寫在從深圳返家的途中。呆在一個地方已經(jīng)至少兩個鐘了,看來十一要在路上與眾位萍水相逢的同乘們一起度過了。 好了,話不...
    沐酒鴻江閱讀 345評論 0 0
  • text-shadow是給文本添加陰影效果,box-shadow是給元素塊添加周邊陰影效果。隨著HTML5和CSS...
    arlene112閱讀 2,295評論 0 1
  • 不小心刪了第一天的文章,還好圖還在。
    素心cathy閱讀 255評論 0 0