outline兩層邊框代碼實例
使用outline屬性可以實現多層邊框效果。
代碼實例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/" />
<title>實例</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
float: left;
padding: 10px;
margin: 10px 20px;
color: #333;
text-align: center;
font-size: 16px;
font-weight: bold;
}
.outline {
background: #ccc;
border: 10px solid #655;
outline: 5px dashed deeppink;
outline-offset: 10px;
}
</style>
</head>
<body>
<div class="box outline">outline兩層邊框</div>
</body>
</html>
上面的代碼實現了多層邊框效果。
聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至201542412@QQ.com舉報,一經查實,本站將立刻刪除。
相關推薦
-
checkbox復選框美化代碼實例
默認狀態下,chckbox復選框并不美觀,雖然滿足基本的需要。但是在美觀度要求很高的網站中,實在是不堪入目,所以需要進行格外的美化。下面分享一個代碼實例,它實現了復選框的美化效果。代碼如下:!DO
-
<input type="file">美化效果代碼實例
關于這里就不介紹了,大家應該都不會陌生。但是它默認的樣式實在是丑陋,難登大雅之堂,下面就分享一段代碼實例,它實現了對此控件的美化效果。代碼實例如下:
-
outerText和innerText屬性的區別實例介紹
在開始文章技術細節的區別介紹之前,先來闡明一個標準上的區別:outrTxt是符合W3C標準的,而innrTxt則是非標準的。下面來先來看一段代碼實例:
-
js prototype屬性使用代碼實例
關于rototy屬性的用法這里不多介紹了,具體可以參閱jvscrit rototy原型一章節。下面就分享一段關于rototy屬性使用的代碼實例,需要的朋友可以做一下參考。代碼如
-
js獲取偽元素選擇器規定的內容代碼實例
關于偽元素選擇器可以參閱CSS bfor/::bfor一章節。下面介紹一下如何利用js獲取偽元素選擇器定義的內容,這種需求在以前可能比較少。但是隨著瀏覽器的進步,偽元素選擇器的實用會越來越廣















