CSS3.0新增屬性

時間 2019-11-08

標籤 css3.0 css 新增屬性欄目 CSS 简体版

原文原文鏈接

背景圖片設定
background 默認圖片重複
css容許應用純色做爲背景，也容許使用背景圖像建立至關複雜的效果
background-size規定背景圖片的尺寸
background-size:cover 優先寬釋放高度根據寬度釋放
cover把背景圖像擴展至足夠大，以使背景圖像徹底覆蓋背景區域。
背景圖像的某些部分也許沒法顯示在背景定位區域中。
contain把圖像擴展至最大尺寸，以使其寬度和高度徹底適應內容區域。css

顏色
十六進制色 background-color:#0000ff;
RGB顏色：rgb(255,0,0)
RGBA顏色：rgba(255,0,0,0.5)
HSL顏色： hsl(120,65%,75%)
HSLA顏色：hsla(120,65%,75%,0.3)html

RGBA顏色值獲得如下瀏覽器的支持：IE9+,Firefox3+，Chrome,Safari以及Opera10+
RGBA顏色值是RGB顏色值的擴展，帶有一個alpha通道-它規定了對象的不透明度
RGBA顏色值是這樣規定的：rgba(red green blue alpha)alpha參數是介於0.0（徹底透明）
與1.0（徹底不透明）的數字。web

不透明度
CSS建立透明圖像(默認圖像是不透明的)
註釋：CSS opacity屬性是W3C CSS推薦標準的一部分
filter:alpha(opacity=XX)是IE濾鏡瀏覽器

.transparent_class{
filter:alpha(opacity=50);
-moz-opacity:0.5; /*瀏覽器的兼容*/
-khtml-opacity:0.5;/*瀏覽器的兼容*/
opacity:0.5;
}url

漸變(能夠多個顏色之間變化)

漸變能夠建立相似於彩虹的效果，低版本的瀏覽器不得不使開發者用圖片來實現，CSS3將會
輕鬆實現網頁漸變效果。
background:-webkit-linear-gradient(#fffff,#ffffff,#000000)/*線性漸變*/spa

個性邊框
CSS3新增三個邊框屬性
Border-radius 圓角邊框
Box-shadow 邊框陰影
Border-image 圖片邊框
IE9+支持圓角和陰影htm

圓角邊框 (變成一個圓形圖像用來作頭像)
div{ border:2px solid;
border-radius:25px
-moz-border-radius:25px;/*Old Firefox*/
-webkit-border-radius:25px;/*添加WEBKIT支持*/
border-top-left-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
}對象

陰影
在CSS中，box-shadow用於向方框添加陰影
語法
box-shadow:h-shadow v-shadow blur spread color inset;
box-shadow:0px 1px 3px rgba(0,0,0,0.35)圖片

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3.0特性</title>
    <style>
        body
        {
            background: url("moto1.jpg");
           background-size: contain;
        }
        #bgc
        {   width: 200px;
            height: 200px;

            background-color: rgba(0,0,255,.5);/*1徹底不透明，0徹底透明*/

        }
        #op
        {
            width: 200px;
            height: 200px;
            background-color: green;
            opacity: 0.25;
        }
        #linear
        {
            width: 200px;
            height: 200px;
           background: -webkit-linear-gradient(green,gray,red);/*漸變色*/
        }
        #radius
        {
            width: 200px;
            height: 200px;
            border: 2px black solid;

            border-top-right-radius:2em ;
            border-top-left-radius:2em;
            border-bottom-right-radius:2em;
            border-bottom-left-radius:2em;
        }
        #imgrd
        {   /*設置一個圓形*/
            width: 300px;
            height: 300px;
            background: -webkit-linear-gradient(#000000,#cccccc);/*漸變色*/
            border: 2px #222222 solid;
            border-radius: 150px;/*邊框圓角*/
        }
       #shadow
       {
           width: 300px;
           height: 300px;
           background: goldenrod;
           box-shadow: 10px 20px 10px rgba(0,0,0,0.8) ;/*橫 縱 陰影模糊的距離 陰影的顏色*/
       }
    </style>
</head>
<body>
<div id="bgc">背景色</div>
<div id="op">不透明度</div>
<div id="linear">漸變線</div>
<div id="radius">圓角邊框</div>
<div><img src="moto3.jpg" id="imgrd"></div>/*製做一個圓形的圖像*/
<div id="shadow">陰影</div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。