css 横线_CSS-画一个太极阴阳图
先來看一下最終展示
接下來一步步實現它
第一步
寫一個HTML文件，內容只需要一個<div>標簽，給一個類為"taiji"
<!DOCTYPE html> <html><head><title>太極</title><link rel="stylesheet" href="taiji.css"></head><body><div class="taiji"></div></body> </html>為了方便，這里使用的是外部鏈接樣式表。
第二步
到這頁面還是一片空白
其實<div>已經在里面了
先給它一個邊框，就可以看到了
.taiji{ border: 1px solid black;} /* 1像素 實線 黑色 邊框 */頁面中出現了一條橫線為什么是橫線呢？
因為<div>是一個塊級元素，塊級元素的高度由其內部文檔流元素的高度總合決定
因為HTML里的<div>內容為空
所以<div>在這里是一個高度為零，寬度自適應的黑色1px厚的橫線
于是給它指定一個寬高
width: 200px; height: 100px;得到一個長方形的黑色邊框
很好奇吧
繼續
給其一個屬性，讓它邊框變成半圓形
border-radius: 50%;/* CSS 屬性 border-radius 允許你設置元素的外邊框圓角 */由于高度是寬度的一半所以得到了一個橢圓
誒？不對啊
太極是圓形的啊
做一個橢圓是不是做錯了
先別急
接著看
border-bottom-width: 100px; /* 指定下邊框的寬度為100px */運行一下
發現了什么
太極的雛形有了
那是為什么呢？
我做一個的講解
首先按照預想的那樣 設置寬高為一樣的值
運行
為了方便講解 我給底部加了一道線然后添加剛才的屬性進去
得到一個這樣的圖
這是因為
黃色線即為底部邊框線的寬度范圍ok 雛形初現之后 再來做兩個小圓
本文探討的是只使用一個<div>標簽的情況下制作太極圖
所以這里要使用到偽元素定義
這里先說一下偽元素的概念，就像偽類一樣， 偽元素添加到選擇器，但不是描述特殊狀態，它們允許您為元素的某些部分設置樣式。這里用到的偽元素是::before和::after，相當于在div里面添加前面和后面兩個元素。
注意：在偽元素要添加content，否則設置寬高都沒用的；還有就是要設置position屬性，否則還偽元素還是不會顯示
效果圖為了效果看的更加明顯 我還沒有調整位置
現在可以理解為一個大圓里面包含了一個小圓
小圓在內部相對于大圓進行定位
如果大圓位置變動 小圓也會跟著一起變動 但與大圓的定位保持不變
現在調整一下位置
top: 50px;/* 指的是小邊框上線到大邊框上線的距離 */ left: 0; ***上下兩種方式*** top: 50%; left: 0;效果圖因為大圓的邊框設置為黑色，小圓沒有內容，所以被遮擋了，只要給一個背景色就可以
background-color: white;效果圖右邊的小圓，同理，只要把左右顏色變化即可
完成 刷新運行一下
最終效果圖總結
以上是生活随笔為你收集整理的css 横线_CSS-画一个太极阴阳图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python中output使用_Pyth
- 下一篇： 中秋祝福网页制作_10大中秋H5模板分享