目錄
css相關參數介紹
邊距
邊框
偽元素選擇器
太極圖案例實現、
代碼
效果
css相關參數介紹
邊距
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}div{width: 100px;height: 100px;/* margin-left: -110px; *//* 內邊距 : 邊框距離內容的長度*//* padding:100px; *//* 上下內邊距 左右邊距*//* padding: 100px 500px; *//* 上 右 下 左 *//* padding: 10px 100px 200px 300px; *//* 距離上邊界的長度 *//* padding-top: 100px; *//* 距離左邊界的長度 *//* padding-left: 100px; *//* 距離底邊界的長度 *//* padding-bottom: 100px; *//* 距離右邊界的長度 *//* padding-right: 100px; *//* 外邊距 ：邊界距離其他標簽或者頁面的長度*//* margin:100px 200px ; *//* margin: 10px 100px 200px 400px; *//* 左邊距 *//* margin-left: 100px;margin-top: 100px;margin-right: 100px;margin-bottom: 100px; */border: 1px solid red;/* 默認情況下塊元素的寬跟頁面相同，高的默認值是0 */}</style></head><body><div>11111111111</div><p>22222222222</p></body>
</html>邊框
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{width: 100px;height: 100px;/* border縮略寫法*//* border: dashed 1px red; *//* 以下三個屬性完全等價于上面的邊框 */border-width: 1px;/* border-color: red; */border-style: solid;/* 將四個角進行圓化處理 *//* border-radius: 50%; *//* 左上角圓化 *//* border-top-left-radius: 50%; *//* 右下角圓化 *//* border-bottom-right-radius: 50%; *//* 右上 *//* border-top-right-radius: 50%; *//* 左下 *//* border-bottom-left-radius: 50%; *//* 左邊綠色 */border-left-color: green;border-top-color: red;border-right-color: yellow;border-bottom-color: purple;border-left-style: dashed;border-top-style: dotted;border-right-style: groove;border-bottom-style: solid;}</style></head><body><div></div></body>
</html>偽元素選擇器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}ul{list-style: none;}/* ul>li{border: 1px solid red;} *//* 標簽中的文字的第一個字符做渲染 *//* ul>li::first-letter{font-size: 50px;color: rebeccapurple;} *//* ul>li::first-line{font-size: 50px;color: rebeccapurple;} */ul>li::before{/* 在寫before偽元素是，content必須存在，否則整個偽元素無效 */content: "";display: inline-block;width: 10px;height: 10px;border: 1px solid blue;margin-right: 10px;margin-top: 20px;background-color: blue;border-radius: 50%;}</style></head><body><ul><li>壹234567890</li><li>貳asdasdfsdf</li><li>叁ccccccc</li></ul></body>
</html>太極圖案例實現、
代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{background-color: burlywood;}div{width: 0;height: 200px;border-left-width: 100px;border-left-color: white;border-left-style: solid;border-right-width: 100px;border-right-color: black;border-right-style: solid;border-radius: 50%; }div::before,div::after{content: "";width: 25px;height: 25px;display: block;background-color: white;border: 37.5px black solid;border-radius: 50%;margin-left: -50px;}div::after{border-color: white;background-color: black;}</style></head><body><div></div></body>
</html>效果
