标签：圆角 盒子 outline 半轴 radius 轮廓 border 属性

轮廓：

• 属性名：outline
• 属性值：宽度   颜色   样式
• 与border类似，不同点：outline不会影响到其他元素

•         .out{
              width: 100px;
              height: 100px;
              background:#bfa;
              outline: 10px grey solid;
          }

  

 阴影：

• 属性名：box-shadow
• 属性值：向右/左偏移（+-），向下/上偏移，模糊值，阴影颜色

•  box-shadow:9px 19px 3px rgba(0, 0,0,0.2);

•  

 圆角：

• 组合属性名：border-radius
• 四个角单独属性名：

           border-top-left-radius:左上 ;
           border-top-right-radius: 右上;
           border-bottom-right-radius:右下 ;
           border-bottom-left-radius: 左下;

• 单独属性值：一个：圆角半径；两个椭圆：x半轴，y半轴
• 组合属性值：特点：对称

  一个	四个角
  两个	左上+右下   右上+左下
  三个	左上+右下 右上 左下
  四个	左上 右上 右下 左上

• 组合属性值需要椭圆角时，用/区分x半轴，y半轴

标签：圆角,盒子,outline,半轴,radius,轮廓,border,属性
来源： https://blog.csdn.net/qq_45797783/article/details/119248888

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。