CSS3 02. 邊框、邊框圓角、邊框陰影、邊框圖片、漸變、線性漸變、徑向漸變、背景、過渡transition、2D轉換(縮放、位移、旋轉、傾斜)

本文轉載自查看原文 2017-05-02 16:53 4292 02-css基礎

邊框圓角　border-radius

　　每個角可以設置兩個值，x值、y值

　　　　border-top-left-radius：水平半徑　　垂直半徑

　　　　border-radius：水平半徑/垂直半徑

　　　　border-radius:60px 30px 120px 160px/160px 120px 30px 60px ;

　　　　單位：百分比和像素。最好使用%

　　　　練習(重要）　　

盒子陰影　box-shadow

　　可設置多重邊框陰影，增強立體感

　　box-shadow: 5px 　　5px　　 27px red,-5px -5px 27px green;

　　box-shadow:水平位移垂直位移模糊度陰影大小陰影顏色內陰影(inset)／外陰影(outset 默認) ；

　　　　　　　　　水平位移：正值向右；

　　　　　　　　　垂直偏移：正值向下；

　　邊框陰影不會改變盒子的大小，不會影響兄弟元素的布局　　

邊框圖片　border-image

　　border-image:url("images/border.png") 27/20px round ;

　　border-image設置邊框的背景圖片

　　border-image-source:url("地址")設置邊框圖片的地址。

　　border-image-slice:27,27,27,27;　　裁剪圖片

　　border-image-width: 20px;　　指定邊框的寬度

　　border-image-repeat: stretch; 邊框的樣式： stretch 拉升／ round 自動調整縮放比例／repeat重復；

“切割”完成后生成虛擬的9塊圖形，然后按對應位置設置背景，

其中四個角位置、形狀保持不變，中心位置水平垂直兩個方向平鋪。如下圖

漸變

　　通過漸變可實現許多絢麗的教過，有效減少圖片的使用數量，並且具有很強的適應性和可擴展性。

線性漸變 linear-gradient

　　linear-gradient線性漸變指沿着某條直線朝一個方向產生漸變效果。

　　上圖是從黃色漸變到綠色

　　　　background:linear-gradient(

　　　　　　　　　　　　　　　　　　to right ,

　　　　　　　　　　　　　　　　　　red 0%,red25%,

　　　　　　　　　　　　　　　　　　blue 25%,blue 25%,

　　　　　　　　　　　　　　　　　　green 50%,green50%

　　　　　　　　　　　　　　　　　　pink 75%,ping100%);　　　

　　　　background:linear-gradient( 方向to(left\right\top\bottom，也可以使用度數), 漸變起始顏色, 漸變終止顏色)

to top	0 deg	360 deg	底部到頂部
to bottom	180 deg	-180 deg	頂部到底部
to left	-90 deg	270 deg	從右向左
to right	90 deg	-270 deg	從左向右
to top left	315 deg	-45 deg	右下角到左上角
to top right	-315 deg	45 deg	左下角到右上角
to bottom left	225 deg	-135 deg	右上角到左下角
to bottom right	-225 deg	135 deg	左上角到右下角

徑向漸變（radial徑向）

radial-gradient徑向漸變指從一個中心點開始沿着四周產生漸變效果　　

background:radial-gradient( 150px at center, yellow,green);圍繞中心點漸變，半徑是150px，從黃到綠做漸變

必要的元素：

　　輻射范圍即圓半徑（半徑越大，漸變效果越大。半徑可以不等，即可以是橢圓）

　　中心點即圓的中心（中心點的位置是以盒子自身），中心位置參照的是盒子的左上角

徑向漸變

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 250px;
            height: 250px;
            border: 1px solid #000;
            margin: 20px auto;
        }
        /*
            徑向漸變：
            radial-gradient（輻射半徑, 中心的位置，起始顏色，終止顏色）;
            中心點位置：at  left  right  center bottom  top
        */
        div:nth-child(1){
            background-image: radial-gradient(at left top,yellow,green);
        }

        div:nth-child(2){
            background-image: radial-gradient(at 50px 50px,yellow,green);
        }

        div:nth-child(3){
            background-image: radial-gradient(100px at center,yellow ,green);
        }

        div:nth-child(4){
            background-image: radial-gradient(100px at center,
            yellow 0% ,
            green 30%,
            blue 60%,
            red 100%);
        }

        div:nth-child(5){
            background-image: radial-gradient(100px 50px  at center,yellow ,green);
        }


    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
</body>
</html>

徑向漸變練習

背景：

背景在CSS3中也得到很大程度的增強，比如背景圖片尺寸、背景裁切區域、背景定位參照點、多重背景等。

background-size:width,height 可以設置背景圖片的寬高和高度

background-size: 600px ,auto; 自動適應盒子的寬度也可以設置為百分比

background-size: cover(覆蓋)/ contain(包含)

　　cover 會自動調整縮放比例，保證圖片始終填充滿背景區域，若有溢出則隱藏

　　contain 自動調整縮放比例，保證圖片始終完整顯示在背景區域

背景原點background-origin：

　　調整背景位置的參照點，默認從padding開始平鋪

　　background-origin： border-box (以邊框做為參考原點)／padding-box（以內邊距作為參考原點）／content-box（以內容區作為參考點）

背景裁剪background-clip：

　　屬性值若比原點的范圍大，不起作用

　　border-box:最大，裁切邊框以內為背景區域；

　　padding-box ：裁切內邊距以內為背景區域

　　content-box：裁切內容區域做為背景區域裁減去border-box和padding-box部分縣市的背景圖片

以逗號分隔可以設置多背景，可以用於自適應

        .box{
            width: 623px;
            height: 416px;
            border: 1px solid #000;
            margin:100px auto;
            /* 給盒子加多個背景，按照背景語法格式書寫，多個背景使用逗號隔開 */
            background: url(images/bg1.png) no-repeat left top
                        ,url(images/bg2.png) no-repeat right top
                        ,url(images/bg3.png) no-repeat right bottom
                        ,url(images/bg4.png) no-repeat left bottom
                        ,url(images/bg5.png) no-repeat center;
        }

過渡transition：要過渡的屬性過渡的時間速度曲線延遲時間；

過渡是CSS3中具有顛覆性的特征之一，可以實現元素不同狀態間的平滑過渡（補間動畫），經常用來制作動畫效果。

補間動畫：自動完成從起始狀態到終止狀態的的過渡。不用管中間的狀態

幀動畫：撲克牌切換.通過一幀一幀的畫面按照固定順序和速度播放。如電影膠片

特點：當前元素只要有“屬性”發生變化時，可以平滑的進行過渡。

      .box{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin:100px auto;
            background-color: red;

            /* 過渡屬性*/
            /*transition:width 2s,background-color 2s;*/
            /* 如果多個過度的 特性是一樣的 可以簡寫*/
            /* transition: 過渡屬性 持續時間  運動曲線 延遲時間*/
            transition:all 4s linear 1s ;

            /* 過渡必須加給盒子本身*/
        }

        .box:hover{
            width: 600px;
            background-color: blue;
            /*height:400px;*/
        }

transition: [過渡屬性 | 過渡時間 | 速度曲線 | 延遲時間]

　　可簡寫

　　transition-porperty: 過渡屬性。所有屬性都需要則填寫all

　　transition-duration:過渡持續時間

　　transition-timing-function:運動曲線

　　　　linear勻速／ease減速／ease-in 加速／ease-out減速／ease-in-out 先加速后減速

　　transition-delay: 過渡延遲

氣泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 過渡</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }

        .pop {
            width: 300px;
            height: 120px;
            margin: 30px auto;
            background: url("images/paopao.png") left bottom no-repeat,
            url("images/paopao.png") right top no-repeat;
            background-color: #036;
            border-radius: 6px;
            transition: all 1s linear;
        }

        .pop:hover{
            background-position:left top, right bottom;
        }

        



    </style>
</head>
<body>
    <div class="pop"></div>
</body>
</html>

氣泡

手風琴菜單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 過渡</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }
        h3 {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 500px;
            margin:0 auto;
        }
        .list h3 {
            height: 35px;
            line-height: 35px;
            padding-left: 30px;
            border-bottom: 2px solid #690;
            font-size: 14px;
            color: #FFF;
            background: #369;
            transition: all 0.3s ease 0s;
        }
        .list .pictxt {
            height: 0px;
            background: pink;
            transition: all 0.3s ease 0s;;
        }
        .list:hover h3 {
            background: #036;
        }
        .list:hover .pictxt {
            height: 150px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="list">
            <h3>今日新聞</h3>
            <div class="pictxt"></div>
        </div>
        <div class="list">
            <h3>今日新聞</h3>
            <div class="pictxt"></div>
        </div>
        <div class="list">
            <h3>今日新聞</h3>
            <div class="pictxt"></div>
        </div>
        <div class="list">
            <h3>今日新聞</h3>
            <div class="pictxt"></div>
        </div>
    </div>
</body>
</html>

手風琴菜單

2D 轉換

轉換是CSS3中具有顛覆性的特征之一，可以實現元素的位移、旋轉、變形、縮放，甚至支持矩陣方式，配合即將學習的過渡和動畫知識，可以取代大量之前只能靠Flash才可以實現的效果。在css3 當中，通過transform(變形) 來實現2d 或者3D 轉換,其中2D 有，縮放，移動，旋轉。　　

縮放 scale（X，Y）

　　對元素進行水平和垂直方向的縮放，x，y的取值可為小數，不可為負值

　　大於1為放大，小於1為縮小，內容也會等比縮放

　　只寫一個值，則寬高等比例縮放

　　transform: scale(1.5,1.5);

位移 translate（x,y)

　　改變元素的位置，x,y 可為負值 x在水平方向移動，y在垂直方向移動

　　右移為正／左移為負／右下為正，左下為負，可寫百分比

　　盒子在父盒子中居中： transform:translate(-50%);

旋轉 rotate（角度）

　　正值順時針，負值逆時針

　　可設置旋轉中心：transform-origin: 水平坐標垂直坐標

　　默認旋轉中心：幾何中心，在旋轉后，坐標軸也跟着發生轉變，應把旋轉放在最后

傾斜 skew（deg，deg）

　　元素按照一定角度傾斜，可為負值，第二個參數不寫默認為0　　

　　參數1:水平Y軸（向右為正），順時針角度變換

　　參數2:垂直X軸（向下為正），逆時針旋轉

矩陣matrix() 把所有的2D轉換組合到一起，需要6個參數

盾牌案例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            background-color: #2AB561;
        }
        .box{
            width: 440px;
            height:491px;
            margin:100px auto;

        }

        .box img{
            transition:all 2s;
        }

        /* 打亂正常的圖片*/

        .box img:nth-child(1){
            transform:translate(100px,100px) rotate(45deg);
        }


        .box img:nth-child(2){
            transform:translate(200px,200px) rotate(99deg);
        }

        .box img:nth-child(3){
            transform:translate(-100px,-60px) rotate(166deg);
        }


        .box img:nth-child(4){
            transform:translate(-200px,60px) rotate(86deg);
        }

        .box:hover img{
            transform:translate(0px,0px) rotate(0deg);
        }




    </style>
</head>
<body>
    <div class="box">
        <img src="images/shield_1_01.png" alt=""/>
        <img src="images/shield_1_02.png" alt=""/>
        <img src="images/shield_1_03.png" alt=""/>
        <img src="images/shield_1_04.png" alt=""/>
        <img src="images/shield_1_05.png" alt=""/>
        <img src="images/shield_1_06.png" alt=""/>
        <img src="images/shield_1_07.png" alt=""/>
        <img src="images/shield_1_08.png" alt=""/>
        <img src="images/shield_1_09.png" alt=""/>
    </div>
</body>
</html>

盾牌案例

撲克案例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            overflow: hidden;
        }
        .box{
            width: 310px;
            height: 441px;

            margin:100px auto;
            position: relative;
            
        }

        /*.img1{*/
            /*transition:all 1s;*/
            /* 變換中心*/
            /*
                transform-origin:
                left top center  right  bottom
                50px 50px
            */
            /*transform-origin:center bottom;*/
        /*}*/

    .box img{
        position: absolute;
        left:0;
        top:0;
        transition:all 1s;

        /* 設置變換中心*/
        transform-origin: center bottom;
        box-shadow: 1px 1px 3px 1px #333;

    }

        .box:hover img:nth-child(6){
            transform:rotate(-10deg);
        }

        .box:hover img:nth-child(5){
            transform:rotate(-20deg);
        }

        .box:hover img:nth-child(4){
            transform:rotate(-30deg);
        }
        .box:hover img:nth-child(3){
            transform:rotate(-40deg);
        }
        .box:hover img:nth-child(2){
            transform:rotate(-50deg);
        }
        .box:hover img:nth-child(1){
            transform:rotate(-60deg);
        }

        .box:hover img:nth-child(8){
            transform:rotate(10deg);
        }

        .box:hover img:nth-child(9){
            transform:rotate(20deg);
        }

        .box:hover img:nth-child(10){
            transform:rotate(30deg);
        }
        .box:hover img:nth-child(11){
            transform:rotate(40deg);
        }
        .box:hover img:nth-child(12){
            transform:rotate(50deg);
        }
        .box:hover img:nth-child(13){
            transform:rotate(60deg);
        }



    </style>
</head>
<body>
    <div class="box">
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
    </div>
</body>
</html>

撲克案例

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css3 漸變邊框如何實現圓角效果 css3實現圓角邊框漸變圓角漸變邊框實現 Flutter之Decoration（邊框、圓角、陰影、形狀、漸變、背景圖像等） css邊框顏色漸變 css3-邊框陰影漸變背景文本效果如何實現css漸變圓角邊框 css3實現背景顏色漸變，文字顏色漸變，邊框顏色漸變巧妙實現帶圓角的漸變邊框 css3 如何實現圓邊框的漸變