溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關如何利用CSS中的outline-offset屬性實現加號的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
假設有這么一個初始代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
margin-left: 100px;
margin-top: 100px;
padding: 0;
width: 200px;
height: 200px;
background-color: green;
outline: 20px solid #000;
outline-offset: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>其效果如下:
然后再把這個outline-offset屬性的值改為-118px,那么就會把邊框變成一個加號 當然我這里為了效果顯著一些,我加了一個動畫效果來顯示,如下代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
margin-left: 100px;
margin-top: 100px;
padding: 0;
width: 200px;
height: 200px;
background-color: green;
outline: 20px solid #000;
animation: move 3s infinite;
}
@keyframes move {
0% {
outline-offset: 10px;
}
100% {
outline-offset: -118px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>其效果如下:
使用outline-offset做加號的總結
我覺得這個很有意思,在這里我試了很多次,在這里我總結了一下使用outline-offset屬性負值的條件：
容器必須是個正方形
outline 邊框本身的寬度不能太小
outline-offset 負值 x 的取值范圍為: -(容器寬度的一半 + outline寬度的一半) < x < -(容器寬度的一半 + outline寬度)
在這個例子后，我又在想，CSS 屬性可以取負值的屬性和地方有很多,也有許多意想不到的效果。大家最為熟知的就是負margin，使用負的 marign，可以用來實現類似多列等高布局、垂直居中等等。那還有沒有其他一些有意思的負值使用技巧呢？
下文就再介紹一些 CSS 負值有意思的使用場景。
使用 scale(-1) 實現翻轉
通常，我們要實現一個元素的 180° 翻轉，我們會使用 transform: rotate(180deg) ，這里有個小技巧，使用 transform: scale(-1) 可以達到同樣的效果。看個 Demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.g_container {
position: absolute;
margin: 100px 0 0 500px;
}
.item {
width: 100px;
height: 100px;
background-color: green;
position: relative;
border-radius: 50%;
}
.item {
transform: rotate(0) translate(-80px, 0) ;
}
.item:nth-child(1) {
animation: rotate 3s infinite linear;
}
.item:nth-child(2) {
animation: rotate 3s infinite 1s linear;
}
.item:nth-child(3) {
animation: rotate 3s infinite 2s linear;
}
@keyframes rotate {
100% {
transform: rotate(360deg) translate(-80px, 0) ;
}
}
</style>
</head>
<body>
<div class="g_container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>看看效果：
當然,如果想要讓三個球同時運動,去掉這個延遲,那么可以改成這樣的代碼:
.item:nth-child(1) {
animation: rotate 3s infinite linear;
}
.item:nth-child(2) {
animation: rotate 3s infinite -1s linear;
}
.item:nth-child(3) {
animation: rotate 3s infinite -2s linear;
}其效果我就不說了,就是同時運動,可參照上面的那個效果
負值 margin
負值 margin 在 CSS 中算是運用的比較多的，元素的外邊距可以設置為負值。
在 flexbox 布局規范還沒流行之前，實現多行等高布局還是需要下一番功夫的。其中一種方法便是使用正 padding 負 margin 相消的方法。
有如下一個布局：
左右兩欄的內容都是不確定的，也就是高度未知。但是希望無論左側內容較多還是右側內容較多，兩欄的高度始終保持一致。
OK，其中一種 Hack 辦法便是使用一個很大的正 padding 和相同的負 margin 相消的方法填充左右兩欄：
.left {
...
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.right {
...
padding-bottom: 9999px;
margin-bottom: -9999px;
}可以做到無論左右兩欄高度如何變化，高度較低的那一欄都會隨著另外一欄變化。
總結一下
除了這些,還有很多的屬性,例子沒有列出來(因作者的水平和時間有限)，例如：
使用負 marign 實現元素的水平垂直居中
使用負 marign隱藏列表 li 首尾多余的邊框
使用負 text-indent 實現文字的隱藏
使用負的 z-index 參與層疊上下文排序
感謝各位的閱讀！關于“如何利用CSS中的outline-offset屬性實現加號”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
