在頁面構(gòu)建中毅整，能明顯提升頁面顯示質(zhì)量的一些CSS小技巧预侯。很多簡潔美觀的頁面表現(xiàn)，可以使用CSS3代碼即可實現(xiàn)甲雅，減少圖片的使用解孙。
一、邊框內(nèi)圓角
我們在設(shè)計例如按鈕等控件的時候抛人，會遇到這樣的設(shè)計：只有內(nèi)側(cè)有圓角弛姜，而邊框或者描邊的四個角還是保持直角的形狀，用以下代碼可以輕松的實現(xiàn)函匕。
#wrapper {
width: 200px;
height: 80px;
padding: 10px;
background: rgb(255, 187, 51);
#content {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background: rgb(85, 136, 187);
color: #fff;
font-size: 14px;
border-radius: 20px;
}
}
這種解決方案需要使用到兩個 dom 元素娱据，那么如果只使用一個 dom 元素，應(yīng)該怎么實現(xiàn)盅惜？這里需要用到 CSS 的兩個屬性： box-shadow 和 outline 屬性中剩，具體屬性參見MDN。
box-shadow屬性有以下5個特性
<inset><offset-x> <offset-y><blur-radius><spread-radius><color>
這里我們將使用第四個屬性 spread-radius 來填充效果當(dāng)中的空白抒寂。同時利用 outline 的特性：描邊不跟隨邊框繪制的特點來實現(xiàn)（因為不清楚這是不是一個bug结啼，所以在將來的版本中可能會改變），具體代碼如下屈芜。
box-shadow: 0 0 0 10px rgb(255, 187, 51);
outline: 10px solid rgb(255, 187, 51);
這種實現(xiàn)方式郊愧，對于邊框的寬度和圓角的大小有一定的限制效果。僅當(dāng)邊框?qū)挾?w 與圓角半徑 r 存在 w ≥ (√2-1)r 關(guān)系時才可實現(xiàn).
二井佑、條紋背景
如何使用CSS來實現(xiàn)條紋属铁？
使用 linear-gradient 屬性實現(xiàn)
#stripe {
width: 400px;
height: 200px;
background: linear-gradient(rgb(255, 187, 51), rgb(85, 136, 187));
}
嘗試修改 linear-gradient 屬性，當(dāng)linear-gradient屬性
background: linear-gradient(rgb(255, 187, 51) 50%, rgb(85, 136, 187) 50%);
因為條紋是由 background-image 屬性生成的躬翁，因此當(dāng)然也可以使用 background-size 屬性來改變它的大小
background-size: 100% 40px;
如果某個色標的位置值比整個列表中在它之前的色標的位置值都要小焦蘑，則該色標的位置值會被設(shè)置為它前面所有色標位置值的最大值。
background: linear-gradient(rgb(255, 187, 51) 60%, rgb(85, 136, 187) 0);
然后我們嘗試創(chuàng)建一個三色條紋以及垂直條紋
background: linear-gradient(
rgb(255, 187, 51) 33.3%,
rgb(85, 136, 187) 0,
rgb(85, 136, 187) 66.6%,
rgb(170, 255, 0) 0
);
垂直條紋
background: linear-gradient(to right, rgb(255, 187, 51) 60%, rgb(85, 136, 187) 0);
默認值為 to bottom 盒发，可以設(shè)置 to right; to left 等
斜條紋
background: linear-gradient(45deg,
rgb(255, 187, 51) 25%,
rgb(85, 136, 187) 0,
rgb(85, 136, 187) 50%,
rgb(255, 187, 51) 0%,
rgb(255, 187, 51) 75%,
rgb(85, 136, 187) 0
);
background-size: 30px 30px;
為了達到斜條紋等寬的視覺效果例嘱，需要運用到勾股定理來計算寬度狡逢。
background-size: 42px 42px;
介紹 linear-gradient 的升級版 ： repeating-linear-gradient，可以試著使用 linear-gradient 和 repeating-linear-gradient 實現(xiàn)同樣的60°斜條紋進行對比
background: linear-gradient(60deg,
rgb(255, 187, 51),
rgb(255, 187, 51) 25%,
rgb(85, 136, 187) 0,
rgb(85, 136, 187) 50%,
rgb(255, 187, 51) 0,
rgb(255, 187, 51) 75%,
rgb(85, 136, 187) 0,
rgb(85, 136, 187) 100%
);
background-size: 18px 31px;
background: repeating-linear-gradient(60deg,
rgb(255, 187, 51),
rgb(255, 187, 51) 15px,
rgb(85, 136, 187) 0,
rgb(85, 136, 187) 30px
);
三拼卵、平行四邊形和梯形
使用 transform 屬性可以很輕松的創(chuàng)建一個平行四邊形
#content {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 80px;
background: rgb(85, 136, 187);
color: #fff;
font-size: 14px;
transform: skewX(-30deg);
span {
transform: skewX(30deg);
}
}
缺點：需要兩個元素奢浑、修改的話需要修改兩個地方。
如何使用一個元素就實現(xiàn)這樣的效果腋腮。
解決辦法：將平行四邊形的背景設(shè)置在偽元素上雀彼，對偽元素進行變形。
#content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 60px;
font-size: 18px;
font-weight: 600;
color: #fff;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: skewX(-30deg);
background: rgb(85, 136, 187);
z-index: -1;
}
}
梯形的概念比平行四邊形更加寬泛即寡，只需要兩條邊平行即可详羡。梯形常用于標簽頁，之前常用偽元素方法來實現(xiàn)一個梯形嘿悬。
.trapezoid {
position: relative;
left: 200px;
width: 400px;
height: 180px;
background: rgb(85, 136, 170);
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
color: rgb(255, 255, 255);
&::before,
&::after {
content: '';
position: absolute;
}
&::before {
position: absolute;
top: 0;
left: -100px;
width: 0;
height: 0;
border-top: 180px solid transparent;
border-bottom: 0 solid transparent;
border-right: 100px solid rgb(255, 187, 51);
}
&::after {
position: absolute;
top: 0;
right: -240px;
width: 0;
height: 0;
border-top: 180px solid transparent;
border-bottom: 0 solid transparent;
border-left: 240px solid rgb(255, 187, 51);
}
}
缺點：
- 把兩個偽元素都使用了实柠；
- 需要修改形狀時，需要修改的方過多善涨；
- 不能給梯形加邊框窒盐、陰影；
- 不能設(shè)置成圓角梯形钢拧；
通過構(gòu)造平行四邊形的思想蟹漓，對矩形進行變形。但是這次不采用 2d 平面的變形源内，而是 3d 平面變形葡粒，通過視覺差來構(gòu)造一個梯形。
這里需要用到 transform 屬性3d變換特性：
perspectiverotate3d (rotateX rotateY rotateZ)transform-originscale3d (scaleX scaleY scaleZ)
實現(xiàn)一個最簡單的梯形所需要的代碼只有以下一行：
transform: perspective(200px) rotateX(30deg);
與 2d 變換不同膜钓，3d 內(nèi)部變形是不可逆的嗽交，因此與構(gòu)造平行四邊形相似，我們也可以將圖形的變形放在偽元素上颂斜。
.trapezoid {
position: relative;
left: 200px;
width: 400px;
height: 180px;
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
color: rgb(255, 255, 255);
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(85, 136, 170);
transform: perspective(200px) rotateX(30deg);
z-index: -1;
}
}
優(yōu)化
- 修改
transform-origin屬性夫壁，控制轉(zhuǎn)動軸
transform-origin: bottom;
- 通過
scale3d屬性而非padding屬性來修正視覺大小，同時兼顧了優(yōu)雅降級
transform: perspective(200px) rotateX(30deg) scaleY(2.25);
- 添加圓角沃疮、陰影盒让、背景漸變
background: linear-gradient(to right, rgb(85, 136, 170), rgb(255, 187, 51));
border-top-right-radius: 60px;
border-top-left-radius: 60px;
box-shadow: 10px 10px 10px 1px rgba(85, 136, 170, .2);
- 改變
transform-origin得到不同斜邊的梯形
transform: perspective(200px) rotateX(10deg);
transform-origin: left;
缺點
斜邊的角度依賴于元素的寬度。因此司蔬，當(dāng)元素的內(nèi)容長度不等時邑茄，想要得到斜度一致的梯形就不容易了。3d 變換具體實現(xiàn)原理參見 matrix3d
四俊啼、陰影
投影首先會想到 box-shadow 這個屬性肺缕，根據(jù)以上的介紹，我們可以輕松的做出一個元素的陰影
#shadow {
width: 200px;
height: 100px;
background: rgb(255, 187, 51);
box-shadow: 240px 120px 0 0 red;
}
那么如何針對一張圖片實現(xiàn)其對應(yīng)的陰影？在頁面的例如頭像顯示會遇到這種效果
這里將會使用到CSS3里面的 filter 屬性
#logo {
position: relative;
width: 200px;
height: 200px;
background: url('../img/logo.svg') no-repeat;
&::after {
content: '';
position: absolute;
top: 40px;
left: 0;
width: 100%;
height: 100%;
background: url('../img/logo.svg') no-repeat;
background-size: 100% 100%;
filter: blur(10px)
}
}
看完文章搓谆，還有福利拿哦，往下看??????
感興趣的小伙伴可以在公號【grain先森】后臺回復(fù)【190315】獲取【Css 參考規(guī)范】豪墅，可以轉(zhuǎn)發(fā)朋友圈和你的朋友分享哦泉手。
