溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
概念介紹：
CSS
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
DIV
DIV是層疊樣式表中的定位技術，全稱DIVision，即為劃分。有時可以稱其為圖層。DIV在編程中又叫做整除，即只得商的整數。 DIV元素是用來為HTML(標準通用標記語言下的一個應用)文檔內大塊(block-level)的內容提供結構和背景的元素。
定義
<div> 可定義文檔中的分區或節(division/section)。
<div> 標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯。
如果用 id 或 class 來標記 <div>，那么該標簽的作用會變得更加有效。
注釋:<div> 是一個塊級元素，也就是說，瀏覽器通常會在 div 元素前后放置一個換行符。
提示:請使用 <div> 元素來組合塊級元素，這樣就可以使用樣式對它們進行格式化。
實現下圖的加號效果：
若想實現這個效果， 只需一個div元素即可搞定。
需要用到css的為了before和after， 以及border特性。
先設置一個div便簽
<div class="add"></div>
再設置一個邊框：
.add {
border: 1px solid;
width: 100px;
height: 100px;
color: #ccc;
transition: color .25s;
position: relative;
}此時邊框是這樣的：
我們可以利用偽類before和其border-top來設置一個“橫”：
.add::before{
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 80px;
margin-left: -40px;
margin-top: -5px;
border-top: 10px solid;}
注意我們使了絕對定位。 此時變成了這樣：
參照上面， 我們可以使用after偽類和border-bottom設置一個“豎”：
.add::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
height: 80px;
margin-left: -5px;
margin-top: -40px;
border-left: 10px solid;
}在加上hover偽類，設置鼠標懸浮上去的顏色：
最終的樣式：
當鼠標懸浮上去是， 會變色：
以上就是純css實現加號“+”效果（代碼示例）的詳細內容，更多請關注億速云其它相關文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
