简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

css3中關於outline如何為div元素新增輪廓線的實例

黄舟
發布： 2017-07-27 09:18:35
原創
2175 人瀏覽過

css3 outline為div元素添加輪廓線

 有時為了樣式的更加美觀，可適當的為div添加輪廓線。可透過outline屬性來實現。

outline 包含以下幾個屬性值；

outline-width:輪廓線的粗細。

此屬性值包含4個參數：thin，medium,thick,length

thin:定義細輪廓；

medium:定義中型輪廓；

#thick:定義粗型輪廓。

length:可以指定輪廓線的粗細，註，此值不能為負值；

outline-style：輪廓線的樣式。

此屬性常用參數：

none:設定為none時，輪廓將不顯示.

##dotted:點輪廓線,

dashed:虛線輪廓線,

solid:實線輪廓線。

outline-color:輪廓線的顏色

此屬性的參數：

#顏色名稱:(red);

rgb顏色值:rgb( 255,255,255);

十六進位顏色值:如：#ff0000;

outline-offset:輪廓線與容器的偏移值。此值為負時，將向容器內顯示輪廓線。

範例程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=&#39;utf-8&#39; />
<title>无标题文档</title>
<style>
.aixuexi{
padding:20px;
position:fixed;
top:100px;
left:300px;
border:2px dashed #000;
width:100px;
height:100px;
line-height:100px;
background:#abcdef;
outline-width:10px;
outline-style:solid; 
outline-color:#99FF00;
outline-offset:20px;
}
</style>
</head>
<body>
<div class="aixuexi"><a href="#">hello world</a></div>
</body>
</html>
登入後複製

以上是css3中關於outline如何為div元素新增輪廓線的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
css3 outline
來源：php.cn
上一篇：CSS中Outlines輪廓的具體分析 下一篇：css中關於outline與border的區別分析
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
找不到模組：錯誤：無法解析'@heroicons/vue/24/outline” 在我的vue組件中添加此引用後，我立即收到錯誤訊息：<scriptsetup>import{ExclamationTriangleIcon,XMarkIcon}from...
來自於 2023-11-01 14:45:19
0
1
222
在Safari中如何使用CSS在圓形<button>上獲得圓形輪廓 我試圖獲得一個具有相同顏色輪廓的圓形按鈕，但這似乎不可能。輪廓最終總是呈現正方形。有沒有一種方法可以用a來實現這一點，或者它可能只能用a來實現？ button{width:40px...
來自於 2023-10-26 09:54:54
0
2
604
如何取得TantStack表的目前Page Index 我正在使用TantStack和ReactTable庫建立一個表。我想在表頁腳中顯示當前頁面索引，例如“第1頁，共8頁”，其中“1”表示當前頁碼，“8”是總頁數。我無法弄清楚如何從T...
來自於 2023-09-02 12:11:52
0
1
288
當一個元素懸停時如何影響其他元素 我想要做的是，當某個div懸停時，它會影響另一個div的屬性。例如，在這個JSFiddle演示中，當您將滑鼠懸停在#cube上時，它會更改background-color但我想要的...
來自於 2023-08-27 12:48:40
0
2
206
內聯塊：探索其空間特性 內聯區塊之間有一個奇怪的間隔。我可以接受它，直到我用AJAX呼叫載入更多內容時，這個小間隔就消失了。我知道我在這裡漏了什麼。 div{width:100px;height:auto...
來自於 2023-08-22 19:42:53
0
2
308
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！