标签：css3 圆角 阴影 边框 border 30px 属性

边框（三要素）

宽度

• border-width
• 单位是px

线型

• border-style
• solid实线
• dashed虚线
• dotted点状线

颜色

• border-color
• 就是普通的颜色
• transparent（透明色）

书写小属性的好处是可以层叠通用属性，用于调个别样式

四个方向的边框

• border-top
• border-right
• border-bottom
• border-left
• 也可有分别的小属性
  

去掉某方向边框

border-left：none；

用边框制作三角形

• 原理是边框是盒子高度宽度为0，只留下一边的边框
• 不能去掉边框，去掉就不会出现斜线了

圆角

• border-radius
  单位通常是px，表示圆角的半径
  
• 也可以用百分比为单位
  如果正方形设置50%就是正圆
  如果长方形设置50%就是椭圆

分别设置圆角

• border-radius：10px 20px 30px 40px
  左上 右上 右下 左下
• 也可以使用小属性，描述上下的在前，左右的在后
  

阴影

• box-shadow
• box-shadow：10px 20px 30px rgba(0,0,0,.4)
  ************** x偏移 y偏移 模糊量 颜色

延展值

• 如果在30px后面加一个值，他就会向四个方向延展

内阴影

• 在最前面加inset

多阴影

• 用逗号分隔接着写即可

标签：css3,圆角,阴影,边框,border,30px,属性
来源： https://www.cnblogs.com/zongkm/p/15724461.html

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