标签：color 默认值 sha 外部 red 通配 计算 颜色 偏移量
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>CSS3初识(三)布局——盒子模型的尺寸、轮廓、阴影与圆角</title> <style> *{ /*在通配符里将默认样式清空(不完整)*/ margin: 0; padding: 0; } .box1{ width: 100px; height: 100px; background-color: #666666; border: 5px solid red; padding: 10px; } .box2{ width: 100px; height: 100px; background-color: orange; outline: 5px solid blue; padding: 10px; box-shadow: 20px 20px 10px #666666; border-radius: 5px 10px 20px; } /* 默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定 box-sizing(尺寸属性)：用来设置盒子尺寸的计算方式(设置width和height的作用) 可选值： content-box：默认值，宽度和高度用来设置内容区的大小 border-box：宽度和高度用来设置整个盒子的可见框的大小 outline(轮廓属性)：类似border，但不影响可见框大小，只是在外部加了一个边框，可能会遮挡到周围的元素 相当于在周围设置一圈轮廓线 box-shadow(阴影属性)： 属性值： (右侧偏移量)px (下侧偏移量)px (阴影虚化半径)px 颜色(顺序可调整) 注意：阴影不会影响布局 border-radius(圆角属性)： 属性值： (左上角半径)px (右上角半径)px (右下角半径)px (左下角半径)px (所有圆角的半径)px (左上、右下角的半径)px (右上、左下角的半径)px (横向边)px / (纵向边)px 椭圆变换 百分比% (50%为圆形) border-top-left-radius：设置左上角的圆角 px border-top-right-radius：设置右上角的圆角 px border-bottom-left-radius：设置左下角的圆角 px border-bottom-right-radius：设置右下角的圆角 px 以上四个单独圆角的椭圆设置：(横向边)px (纵向边)px */ </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <p>这里的文字没有被阴影挡住</p> </body> </html>
Web全栈工程师之路(二)——CSS篇(四)——布局——盒子模型的尺寸、轮廓、阴影与圆角
标签：color 默认值 sha 外部 red 通配 计算 颜色 偏移量
原文地址：https://www.cnblogs.com/lyrebirth-world/p/12730875.html
