Css3使用技巧有哪些

這篇文章主要為大家展示了“Css3使用技巧有哪些”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Css3使用技巧有哪些”這篇文章吧。

經(jīng)典的css3實(shí)例本文會提到以下幾個css3的屬性：

border-radius、::after、attr和content、box-sizing、linear-gradient、radial-gradient、box-shadow

border-radius

相信這個屬性，寫過css的同學(xué)都知道，用來產(chǎn)生圓角，比如畫一個圓形：

div {

    width:100px;

    height:100px;

    background:red;

    border-radius:100px; //border-radius:100%;

}

然后我們來看看它的語法：border-radius: [左上] [右上] [右下] [左下]，于是我們來畫一個半圓

div {

    width: 100px;

    height: 50px;

    background: red;

    border-radius: 50px 50px 0 0;

}

那如果要畫一個橢圓該怎么辦呢？你會發(fā)現(xiàn)上面的語法貌似做不到了，其實(shí)border-radius的值還有一種語法: x半徑/y半徑：

div {

    width: 100px;

    height: 50px;

    background: red;

    border-radius: 50px/25px;

}

如果我要畫半個橢圓，又要咋辦呢？

div {

    width: 100px;

    height: 50px;

    background: red;

    border-radius: 100% 0 0 100% /50%;

}

::after

這里拿個簡單的例子來看，我們要畫一個放大鏡，如下圖：

分析一下，這個放大鏡可以由兩個div組成，一個是黑色的圓環(huán)，一個是黑色把手（旋轉(zhuǎn)45度）。所以我們就需要用兩個div來實(shí)現(xiàn)嗎？答案是NO，一個div也是可以的，我們可以借助::after來添加一個元素。同理如果需要三個div，我們還可以使用::before再添加一個元素。下面看一下代碼：

div {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    border: 5px solid #333;

    position: relative;

}

div::after {

    content: '';

    display: block;

    width: 8px;

    height: 60px;

    border-radius: 5px;

    background: #333;

    position: absolute;

    right: -22px;

    top: 38px;

    transform: rotate(-45deg);

}

attr和content

比如我們要實(shí)現(xiàn)一個懸浮提示的功能。傳統(tǒng)方法，使用title屬性就能實(shí)現(xiàn)，但是現(xiàn)在我們要更美觀，可以使用css3提供的attr：能夠在css中獲取到元素的某個屬性值，然后插入到偽元素的content中去。

假如我們的html代碼如下：

<div data-title="hello, world">hello...</div>

我們來看看實(shí)現(xiàn)這個插件的css代碼：

div {

    position: relative;

}

div:hover::after {

    content: attr(data-title); //取到data-title屬性的值

    display: inline-block;

    padding: 10px 14px;

    border: 1px solid #ddd;

    border-radius: 5px;

    position: absolute;

    top: -50px;

    left: -30px;

}

當(dāng)hover的時候，在元素尾部添加一個內(nèi)容為data-title屬性值的元素，所以就實(shí)現(xiàn)了hover顯示的效果，如下圖所示：

box-sizing

我們知道，在標(biāo)準(zhǔn)盒子模型中，元素的總寬＝content + padding + border + margin。 css中的盒子模型大家可能都知道，但是這個盒子模型的屬性可能沒有那么多人知道，box-sizing屬性就是用來重定義這個計算方式的，它有三個取值，分別是：content-box（默認(rèn)）、border-box、padding-box

一般來說，假如我們需要有一個占寬200px、padding10px、border5px的div，經(jīng)過計算，要這么定義樣式。

div {

    width: 170px; //這里的寬度要使用200-10*2-5*2 = 170得到。

    height: 50px;

    padding: 10px;

    border: 5px solid red;

}

然后我們來使用一下box-sizing屬性。

div {

    box-sizing: border-box;

    width: 200px; //這里的寬度就是元素所占總寬度，不需要計算

    height: 50px;

    padding: 10px;

    border: 5px solid red;

}

linear-gradient

做活動頁面的時候我們經(jīng)常會遇到這樣的需求：

頂部的中間一張大banner圖片，然后整個區(qū)域的背景色要根據(jù)圖片背景色漸變。就可以使用這個屬性了。

div {

    width: 200px;

    height: 50px;

    background: linear-gradient(to right, red, yellow, black, green);

}

是不是很有趣？其實(shí)，linear-gradient還有更多有趣的功能，你可以根據(jù)下面的動圖去感受一下：

你以為這就完了？等等，還有更強(qiáng)大的呢！repeating-linear-gradient，來感受一下：

linear-gradient還有更加強(qiáng)大的功能，比如它可以給元素添加多個漸變，從而達(dá)到更NB的效果。

radial-gradient

上面的linear-gradient是線性漸變，這個屬性是徑向漸變。下面的代碼實(shí)現(xiàn)了一個chrome的logo。

div.chrome {

    width: 180px;

    height: 180px;

    border-radius: 50%;

    box-shadow: 0 0 4px #999, 0 0 2px #ddd inset;

    background: radial-gradient(circle, #4FACF5 0, #2196F3 28%, transparent 28%),

    radial-gradient(circle, #fff 33%, transparent 33%),

    linear-gradient(-50deg, #FFEB3B 34%, transparent 34%),

    linear-gradient(60deg, #4CAF50 33%, transparent 33%),

    linear-gradient(180deg, #FF756B 0, #F44336 30%, transparent 30%),

    linear-gradient(-120deg, #FFEB3B 40%, transparent 40%),

    linear-gradient(-60deg, #FFEB3B 30%, transparent 30%),

    linear-gradient(0deg, #4CAF50 45%, transparent 45%),

    linear-gradient(60deg, #4CAF50 30%, transparent 30%),

    linear-gradient(120deg, #F44336 50%, transparent 50%),

    linear-gradient(180deg, #F44336 30%, transparent 30%);

}

實(shí)現(xiàn)原理就是使用了多個漸變色放在div上，友協(xié)被遮住，視覺上就產(chǎn)生了想要的效果，是不是很強(qiáng)大！看了下圖你就知道其實(shí)就是在div上加了很多個漸變。

以上是“Css3使用技巧有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！