边框

1.实现边框

  属性:border
  例子:border:3px double blue;
  取值:border-width,border-style,border-color
    边框宽度,样式,颜色,三个值缺一不可(即使有些值具有默认值)
    border-width:取值像素,设置四个方向边框宽度
    border-style:边框样式
      取值:solid 实线边框,dashed 虚线边框,dotted 点线边框,double双线边框
    border-color:设置边框颜色,取颜色值,如果给了transparent那么就是透明
  注意:1.使用border属性为元素设置边框,是同时设置上,右,下,左四个方向
     2.取消默认边框, border:none(这个用法常见于按钮)

2.单边框的设置

  属性:1.border-top:设置顶部边框
     2.border-right:设置右边边框
     3.border-bottom:设置底部边框
     4.border-left:设置左边边框
  取值:跟border中的取值一样。

3.网页三角标的制作:
  1.设置空的块元素,宽高都为0
  2.为元素设置等宽的边框
  3.调整边框颜色,显示一个方向的边框,其余边框设置透明色(transparent)
  注意:四个方向的边框缺一不可,缺少的话,边框会恢复成矩形边框,不再是三角形。

4.轮廓线:
  属性:outline
    取值:width,style,color
  取消轮廓线:outline:none;
  注意:轮廓线围绕在元素内容区域四周,与边框类似,但有区别:轮廓线在网页中不占位,边框在网页中是实际占位的

5.圆角边框:
  1.属性:border-radius
  2.取值:像素值或者百分比
    1.border-radius:20px;一个值表示四个角都已20px做圆角
    2.border-radius:20px 40px;取两个值的时候,按照上右下左顺时针方向设置圆角,从左上角开始一次取值,在给两个值的情况下,上下保持一致,左右保持一致。
    3.border-radius:10px 20px 30px;取三个值得时候,缺少的第四个值与第二个保持一致。
    4.border-radius:10px 20px 30px 40px;分别设置四个圆角程度
  3.百分比取值实现元素形状改变
    border-radius:50%;
    注意:使用百分比设置圆角边框时,是参照当前元素的尺寸进行计算的
       如果元素本身是长方形,设置50%的圆角会变成椭圆
       如果元素本省是正方形,设置50%的圆角会变成正圆

6.边框阴影(盒阴影)
  1.属性:box-shadow
  2.取值:offset-x 阴影的水平偏移距离,取像素值
      offset-y 阴影的垂直偏移距离,取像素值
      blur 阴影的模糊程度,值越大越模糊,取像素值
      spread 阴影的延伸距离(可选),取像素值,可以扩大阴影的范围
      color 阴影颜色(默认为黑色)
    注意:不管是浏览器窗口中还是元素本身,都存在坐标系,都在左上角为(0,0)点,向右,向下代表x,y轴

猜你喜欢

转载自www.cnblogs.com/zengsf/p/9770480.html