標題開個玩笑,實際上CSS3有許多亮眼的特性,比如陰影shadow
、動畫animation
、形變transform
、漸變gradient
、濾鏡filter
等,合理運用這些特性,可以實現許多高大上的效果。如果覺得有用請點個贊或者收藏。
三角形
利用border-color
支持transparent
這一特性,隱藏三條邊框,實現三角形。
<style>
.triangle {
width: 0;
height: 0;
border-style: solid;
box-sizing: border-box;
border-width: 0 10px 10px;
border-color: transparent transparent #c5c5c5 transparent;
}
</style>
<div class="triangle"></div>
效果如下:
在線代碼演示
左上三角形
<style>
.left-top-triangle {
width: 0;
height: 0;
border-style: solid;
box-sizing: border-box;
border-width: 10px;
border-color: #c5c5c5 transparent transparent #c5c5c5;
}
</style>
<div class="left-top-triangle"></div>
效果如下:
在線代碼演示
正五邊形
<style>
.pentagon {
width: 54px;
position: relative;
border-width: 50px 18px 0;
border-style: solid;
border-color: #c5c5c5 transparent;
}
.pentagon::before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent #c5c5c5;
}
</style>
<div class="pentagon"></div>
效果如下:
在線代碼演示
氣泡框
使用絕對定位進行三角形覆蓋,實現氣泡框突出部分。
<style>
.bubble-tip {
width: 100px;
height: 30px;
line-height: 30px;
margin-left: 10px;
border: 1px solid #c5c5c5;
border-radius: 4px;
position: relative;
background-color: #fff;
}
.bubble-tip::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #ffffff transparent transparent;
position: absolute;
top: 5px;
left: -10px;
z-index: 2;
}
.bubble-tip::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #c5c5c5 transparent transparent;
position: absolute;
top: 5px;
left: -11px;
z-index: 1;
}
</style>
<div class="bubble-tip"></div>
效果如下:
在線代碼演示
陰影效果
box-shadow實現
語法:
box-shadow: offest-x offest-y blur-radius spread-radius color inset;
值 | 是否必選 | 描述 |
---|---|---|
offest-x | 是 | 陰影水平偏移量。正值陰影則位於元素右邊,負值陰影則位於元素左邊。 |
offest-y | 是 | 陰影垂直偏移量。正值陰影則位於元素下方,負值陰影則位於元素上方。 |
blur-radius | 否 | 陰影模糊半徑。值越大,模糊面積越大,陰影就越大越淡。不能爲負值。默認爲0,此時陰影邊緣銳利。 |
spread-radius | 否 | 陰影擴散半徑。取正值時,陰影擴大;取負值時,陰影收縮。默認爲0,此時陰影與元素同樣大。 |
color | 否 | 陰影顏色 |
inset | 否 | 陰影擴散方向的關鍵字之一,改變陰影擴散爲朝內。默認關鍵字爲outset,即陰影在邊框外,向外擴散。 |
有三點值得注意:
- 若元素設置了
border-radius
屬性 ,那麼陰影也會有圓角效果。- 同一個元素可以設置多個陰影效果,使用逗號分隔。
- 同個元素上的多個陰影在
z
軸上,按照第一個陰影在最上面的順序依次排列。
<style>
.box-shadow {
width: 500px;
border-radius: 10px;
padding: 20px;
box-shadow: 0 -1em 1em rgba(100, 150, 200, .5) inset,
0 0 0 2px #ff3333,
0.3em 0.3em 0.5em 10px rgb(198, 200, 100);
}
</style>
<div class="box-shadow">
明月幾時有,把酒問青天。不知天上宮闕,今夕是何年。我欲乘風歸去,又恐瓊樓玉宇,高處不勝寒。起舞弄清影,何似在人間。
轉朱閣,低綺戶,照無眠。不應有恨,何事長向別時圓?人有悲歡離合,月有陰晴圓缺,此事古難全。但願人長久,千里共嬋娟。
</div>
效果如下:
在線代碼演示
filter濾鏡實現
filter
屬性將模糊或顏色偏移等圖形效果應用於元素。通常用於調整圖像,背景和邊框的渲染。配合其內置函數,可以實現許多豐富多彩的效果。比如陰影圖像、灰度圖像等。詳見filter-MDN。
函數 | 描述 |
---|---|
url() | 接受一個XML文件,該文件設置了 一個SVG濾鏡,且可以包含一個錨點來指定一個具體的濾鏡元素。例如:filter: url(resources.svg#element-id) |
blur(radius) | “radius”一值設定高斯函數的標準差,或者是屏幕上以多少像素融在一起,所以值越大越模糊;如果沒有設定值,則默認是0;這個參數可設置css長度值,但不接受百分比值。 |
brightness() | 給圖片應用一種線性乘法,使其看起來更亮或更暗。如果值是0%,圖像會全黑。值是100%,則圖像無變化。其他的值對應線性乘數效果。值超過100%也是可以的,圖像會比原來更亮。如果沒有設定值,默認是1。 |
contrast() | 調整圖像的對比度。值是0%的話,圖像會全黑。值是100%,圖像不變。值可以超過100%,意味着會運用更低的對比。若沒有設置值,默認是1。 |
drop-shadow() | 給圖像設置一個陰影效果。陰影是合成在圖像下面,可以有模糊度的,可以以特定顏色畫出的遮罩圖的偏移版本。與上面box-shadow屬性值相似,不過沒有inset/outset關鍵字。 |
grayscal | 將圖像轉換爲灰度圖像。值定義轉換的比例。值爲100%則完全轉爲灰度圖像,值爲0%圖像無變化。值在0%到100%之間,則是效果的線性乘子。若未設置,值默認是0。可參考下面全屏灰色的例子。 |
hue-rotate() | 給圖像應用色相旋轉。“angle”一值設定圖像會被調整的色環角度值。值爲0deg,則圖像無變化。若值未設置,默認值是0deg。該值雖然沒有最大值,超過360deg的值相當於又繞一圈。 |
invert() | 反轉輸入圖像。值定義轉換的比例。100%的價值是完全反轉。值爲0%則圖像無變化。值在0%和100%之間,則是效果的線性乘子。 若值未設置,值默認是0。 |
opacity() | 轉化圖像的透明程度。值定義轉換的比例。值爲0%則是完全透明,值爲100%則圖像無變化。值在0%和100%之間,則是效果的線性乘子,也相當於圖像樣本乘以數量。 若值未設置,值默認是1。該函數與已有的opacity屬性很相似,不同之處在於通過filter,一些瀏覽器爲了提升性能會提供硬件加速。 |
saturate() | 轉換圖像飽和度。值定義轉換的比例。值爲0%則是完全不飽和,值爲100%則圖像無變化。其他值,則是效果的線性乘子。超過100%的值是允許的,則有更高的飽和度。 若值未設置,值默認是1。 |
sepia() | 將圖像轉換爲深褐色。值定義轉換的比例。值爲100%則完全是深褐色的,值爲0%圖像無變化。值在0%到100%之間,則是效果的線性乘子。若未設置,值默認是0。 |
<style>
.filter-shadow {
width: 500px;
padding: 20px;
filter: drop-shadow(0.3em 0.3em 0.5em rgb(198, 200, 100));
}
</style>
<div class="filter-shadow">
明月幾時有,把酒問青天。不知天上宮闕,今夕是何年。我欲乘風歸去,又恐瓊樓玉宇,高處不勝寒。起舞弄清影,何似在人間。
轉朱閣,低綺戶,照無眠。不應有恨,何事長向別時圓?人有悲歡離合,月有陰晴圓缺,此事古難全。但願人長久,千里共嬋娟。
</div>
效果如下:
在線代碼演示
兩者區別
其實代碼和效果上就可以看出來:
box-shadow
是給元素“盒子”的添加陰影,drop-shadow
是給元素“自身”增加陰影。box-shadow
支持陰影疊加,dropshadow
不行。- 參數值不同。有些瀏覽器
drop-shadow
不支持spread-radius
,且drop-shadow
沒有inset
關鍵字。 - 兼容性不同。
box-shadow
從IE9
就開始支持,而drop-shadow
從IE13
纔開始支持。詳見css-boxshadow 、css-filters
全屏灰色(特殊日期使用)
使用濾鏡filter
的grayscale
函數。
<style>
.filter {
-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /*ie*/
filter: gray; /*ie9- */
}
</style>
<html class="filter">
<img src="https://cdn.pixabay.com/photo/2015/04/20/17/01/flower-731830_960_720.jpg" />
</html>
效果如下:
在線代碼演示
漸變
CSS3
的一個重要特性就是漸變gradients
,其輸出爲一種<image>
類型的子類型,可用於<image>
類型值的地方。除了線性漸變linear-gradient
和radial-gradient
以外,還能支持重複線性漸變repeating-linear-gradient
和重複徑向漸變repeating-radial-gradient
。實現斑馬線就是依靠重複線性漸變。詳見gradient-MDN。
斑馬線
利用重複線性漸變repeating-linear-gradient
。語法如下:
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
值 | 描述 |
---|---|
angle | 定義漸變的角度方向。從 0deg 到 360deg,默認爲 180deg。 |
side-or-corner | 指定線性漸變的起始位置。由兩個關鍵字組成:第一個爲指定水平位置(left 或 right),第二個爲指定垂直位置(top 或bottom)。 順序是隨意的,每個關鍵字都是可選的。 |
color-stop1, color-stop2,… | 指定漸變的起止顏色,由顏色值、停止位置(可選,使用百分比指定)組成。 |
<style>
.zebra-crossing {
width: 500px;
height: 300px;
background-image: repeating-linear-gradient(45deg, transparent, transparent 25px, #000 25px, #000 50px);
}
</style>
<div class="zebra-crossing"></div>
效果如下:
在線代碼演示
卡券貼
在CSS3
當中,background
添加了background-size
屬性,控制背景圖片的大小,配合background-position
屬性,可以在一個背景下面展示多張圖片。詳見background-MDN。
卡券貼的核心是使用透明白色徑向漸變radial-gradient
,分別讓4張背景圖中的左下角、右下角、右上角和左下角出現缺省,再利用drop-shadow
實現元素陰影,從而達到效果。
radial-gradient
語法如下:
radial-gradient(shape size at position, start-color, ..., last-color)
值 | 描述 |
---|---|
shape | 確定圓的類型: ellipse (默認): 指定橢圓形的徑向漸變。 circle :指定圓形的徑向漸變 |
size | 定義漸變的大小,可能值: farthest-corner (默認) : 指定徑向漸變的半徑長度爲從圓心到離圓心最遠的角 closest-side :指定徑向漸變的半徑長度爲從圓心到離圓心最近的邊 closest-corner : 指定徑向漸變的半徑長度爲從圓心到離圓心最近的角 farthest-side :指定徑向漸變的半徑長度爲從圓心到離圓心最遠的邊 |
position | 定義漸變的位置。可能值: center(默認):設置中間爲徑向漸變圓心的縱座標值。 top:設置頂部爲徑向漸變圓心的縱座標值。 bottom:設置底部爲徑向漸變圓心的縱座標值。 可混合使用,如top right |
start-color, …, last-color | 用於指定漸變的起止顏色。 |
<style>
.coupon{
width: 200px;
height: 80px;
background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right / 50% 40px no-repeat,
radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 40px no-repeat,
radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 40px no-repeat,
radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 40px no-repeat;
filter: drop-shadow(3px 3px 3px #c5c5c5);
}
</style>
<div class="coupon"></div>
文本溢出自動省略號
核心是CSS3
屬性text-overflow: ellipsis
。
<style>
.ellipsis {
width: 500px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<div class="ellipsis">
明月幾時有,把酒問青天。不知天上宮闕,今夕是何年。我欲乘風歸去,又恐瓊樓玉宇,高處不勝寒。起舞弄清影,何似在人間。
轉朱閣,低綺戶,照無眠。不應有恨,何事長向別時圓?人有悲歡離合,月有陰晴圓缺,此事古難全。但願人長久,千里共嬋娟。
</div>
效果如下:
在線代碼演示
總結
別打了,別打了,我切還不行嗎!!真香~~~