建站
咨詢
售后
建站咨詢
新聞中心
只使用一個(gè)標(biāo)簽，可以有多少種實(shí)現(xiàn)下面的樣式呢?
成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都全網(wǎng)營(yíng)銷、網(wǎng)站重做改版、邵陽(yáng)網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、商城網(wǎng)站定制開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為邵陽(yáng)等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。
假設(shè)我們的單標(biāo)簽是一個(gè) div:
定義如下通用CSS：
- div{
- position:relative;
- width:200px;
- height:60px;
- background:#ddd;
- }
法一：border
這個(gè)應(yīng)該是最最最容易想到的了
- div{
- border-left:5px solid deeppink;
- }
法二：使用偽元素
一個(gè)標(biāo)簽，算上 before 與 after 偽元素，其實(shí)算是有三個(gè)標(biāo)簽，這也是很多單標(biāo)簽作圖的基礎(chǔ)，本題中，使用偽元素可以輕易完成。
- div::after{
- content:"";
- width:5px;
- height:60px;
- position:absolute;
- top:0;
- left:0;
- background:deeppink;
- }
法三：外 box-shadow
盒陰影 box-shadow 大部分人都只是用了生成陰影，其實(shí)陰影可以有多重陰影，陰影不可以不虛化，這就需要去了解一下 box-shaodw 的每一個(gè)參數(shù)具體作用。使用 box-shaodw 解題
- div{
- box-shadow:-5px 0px 0 0 deeppink;
- }
法四：內(nèi) box-shadow
盒陰影還有一個(gè)參數(shù) inset ，用于設(shè)置內(nèi)陰影，也可以完成：
- div{
- box-shadow:inset 5px 0px 0 0 deeppink;
- }
法五：drop-shadow
drop-shadow 是 CSS3 新增濾鏡 filter 中的其中一個(gè)濾鏡，也可以生成陰影，不過(guò)它的數(shù)值參數(shù)個(gè)數(shù)只有 3 個(gè)，比之 box-shadow 少一個(gè)。
- div{
- filter:drop-shadow(-5px 0 0 deeppink);
- }
法六：漸變 linearGradient
靈活使用 CSS3 的漸變可以完成大量想不到的圖形，CSS3 的漸變分為線性漸變和徑向漸變，本題使用線性漸變，可以輕易解題：
- div{
- background-image:linear-gradient(90deg, deeppink 0px, deeppink 5px, transparent 5px);
- }
法七：輪廓 outline
這個(gè)用的比較少，outline (輪廓)是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。這個(gè)方法算是下下之選。
- div{
- height:50px;
- outline:5px solid deeppink;
- }
- div::after{
- position:absolute;
- content:"";
- top:-5px;
- bottom:-5px;
- right:-5px;
- left:0;
- background:#ddd;
- }
法八、滾動(dòng)條
這個(gè)方法由小火柴的藍(lán)色理想提供，通過(guò)改變滾動(dòng)條樣式實(shí)現(xiàn)：
- div{
- width:205px;
- background:deeppink;
- overflow-y:scroll;
- }
- div::-webkit-scrollbar{
- width: 200px;
- background-color:#ddd;
- }
拋開(kāi)實(shí)用性，僅僅是模擬出這個(gè)樣式的話，這個(gè)方法真的讓人眼前一亮。
上述就是想到的 8 種方法，不排除有沒(méi)想到的，希望有其他的方法可以在評(píng)論中提出。可以自己動(dòng)手嘗試嘗試。
【本文為專欄作者“謝軍”的原創(chuàng)稿件，轉(zhuǎn)載可通過(guò)作者微信公眾號(hào)(jingfeng18)獲取聯(lián)系】
網(wǎng)站名稱：前端開(kāi)發(fā)：使用css實(shí)現(xiàn)左邊豎條的8種方法
文章URL：http://www.dlmjj.cn/article/djddocg.html
