1.邊框圓角
在早期如果想要制作四周有圓角的元素時,需要專門制作一張圖片(這其實沒什么),但是試想一下,如果要修改圓角的各種關(guān)系,比如顏色,半徑等等,必須去重新修改圖片才能夠?qū)崿F(xiàn)(十分麻煩).
在html5中針對這個效果專門推出了一個屬性border-radius
w3c_CSS3邊框講解頁面
使用方法:
-
屬性名:
- border-radius
-
賦值方法:
- 賦值的方法類似于
margin
- 賦值的方法類似于
background-color: rebeccapurple;
border-radius:20px;
/*設(shè)置四周的圓角*/
設(shè)置四周的圓角.png
background-color: aqua;
border-radius: 50px 10px;
/*上左下右,上右下左 */
上左下右,上右下左.png
background-color: seagreen;
border-radius: 50px 30px 10px;
/*上左,上右下左,下右*/
上左,上右下左,下右.png
background-color: chartreuse;
border-radius: 50px 40px 30px 20px;
/*上左,上右,下右,下左*/
上左,上右,下右,下左.png
background-color: magenta;
border-radius: 50px/100px;
/*上下的圓角/左右的圓角*/
上下的圓角/左右的圓角.png
background-color: palevioletred;
border-top-left-radius: 40px;
/*上左*/
border-top-right-radius: 10px;
/*上右*/
border-bottom-left-radius: 20px;
/*下左*/
border-bottom-right-radius: 50px;
/*下右*/
上左,下右,上右,下左.png
小結(jié):
該屬性的用法十分簡單,只要搞清楚四邊的對應(yīng)關(guān)系,就能夠制作各種精美組合效果
邊框陰影
除了可以為元素的四周設(shè)置倒圓角以外,CSS3還為我們提供了陰影的功能,能夠制作更為精美的外觀
w3c_CSS3邊框講解頁面
使用方法
-
屬性名:
- box-shadow
-
可選值:
- h-shadow:必需灾测。水平陰影的位置垦巴。允許負值骤宣。
- v-shadow:必需。垂直陰影的位置等限。允許負值。
- blur:可選形娇。模糊距離筹误。
- spread:可選。陰影的尺寸
- color:可選哄酝。陰影的顏色陶衅。請參閱 CSS 顏色值直晨。
- inset:可選。將外部陰影 (outset) 改為內(nèi)部陰影奕巍。
-
示例代碼
- 這里
青色的為li標簽
- 這里
box-shadow:-10px 20px red;
shaw1.png
box-shadow: 5px 5px 20px pink;
/*x偏移值,y偏移值,影子四周模糊程度,影子顏色*/
shaw2.png
box-shadow: 5px 5px 0px 5px red;
/*x偏移值,y偏移值,影子四周模糊程度,影子額外的長度,影子顏色*/
/*影子默認跟元素一樣大*/
shaw3.png
box-shadow: inset 0px 0px 100px yellow;
/*添加了inset以后,影子會往內(nèi)部伸展,其他的都是一樣的*/
shaw4.png
box-shadow: 5px 5px yellow,-5px -5px blue,10px 10px green;
/*多個影子的添加 只需要使用逗號分隔即可 */
shaw5.png
-
注意:
- 這里演示的只是基本用法,實際開發(fā)中配合更高的審美觀,能夠制作更為精美的頁面
字體陰影
這個屬性的使用十分類似
box-shadow
基本使用
屬性名: text-shadow
-
賦值方法_3個值:
- 5px 5px red
- x偏移值,y偏移值,陰影顏色
字體陰影.png
-
賦值方法_4個值:
- 5px 5px 10px pink
- x偏移值,y偏移值,陰影模糊程度,陰影顏色
字體陰影_模糊.png
- 賦值方法_多個陰影
- 5px 5px red,10px 10px yellow;
- 通過
逗號的來分隔不同的陰影
字體陰影_多個陰影.png
Demo(凹凸文字)
首先讓我們來看看字體的具體外觀
凹凸字體實例.png
-
凹字體:
- 參照上圖,當陽光從左上角照射時,字體是
凹進去時,內(nèi)部的輪廓線會被照射為白色
- 參照上圖,當陽光從左上角照射時,字體是
-
凸字體:
- 參照上圖,當陽光從左上角照射時,字體是
凸起時,右上角的輪廓線會被照射為白色
- 參照上圖,當陽光從左上角照射時,字體是
-
分析:
- 陽光照射的輪廓線在上或者是在下就可以讓我們產(chǎn)生這是
凹,凸字體的錯覺
- 陽光照射的輪廓線在上或者是在下就可以讓我們產(chǎn)生這是
具體代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color:gray;
}
a{
/*字體陰影*/
/*x偏移值 y偏移值 (陰影的面積不能給負值) 字體顏色 多個之間使用逗號分隔*/
text-decoration: none;
font:bolder 3em "微軟雅黑";
color: gray;
}
.ao{
text-shadow: 1px 1px #fff,-1px -1px #000;
}
.tu{
text-shadow: 1px 1px #000,-1px -1px #fff;
}
</style>
</head>
<body>
<a href="" class="ao">點擊去看魔獸世界大電影_凹下</a>
<br>
<a href="" class="tu">點擊去看魔獸世界大電影_凸起</a>
</body>
</html>
