css样式学习-边框

在css3中操作边框，有以下边框属性

border-radius
box-shadow
border-image

圆角

border-radius: none　｜　length{1,4} [/ length{1,4}

其中每一个值可以为数值或百分比的形式。
length/length　第一个lenght表示水平方向的半径，而第二个表示竖直方向的半径。
如果是一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等。
如果是两个值，那么 top-left和bottom-right相等，为第一个值，top-right和bottom-left值相等，为第二个值。
如果是三个值，那么第一个值是设置top-left，而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。
如果是四个值，那么第一个值是设置 top-left，而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left

实例：

<style> 
div
{
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    margin:100px 100px;
    background:#dddddd;
    width:300px;
    height:200px;
    border-radius:20px;
}
</style>

<div></div>

设置圆角为20px

设置标准的圆或者椭圆

<style>
        div{
             display: inline-block; 
             border: 10px solid #a1a1a1;}
        .circle{
            width: 150px; height: 150px;
            border-radius: 50%;}
        .elipse{
            width: 150px; height: 200px;
            border-radius: 50%;}
</style>
<body>
    <div class="circle"></div>
    <div class="elipse"></div>
</body>

设置圆或椭圆

如果长宽的取值一样，则显示的是一个圆，否则显示为椭圆

设置实心圆及半圆

<style>
.circle{
    width:100px;
    height:100px;
    background-color:#a1a1a1;
    border-radius:50px;
}
</style>
<body>
<div class="circle"></div>
</body>

设置为整个圆

<style>
.semi_circle{
    width:100px;
    height:50px;
    background-color:#a1a1a1;
    border-radius:50px 50px 0 0;
}
</style>
<body>
    <div class="semi_circle"></div>
</body>

设置为半圆

盒阴影

box-shadow属性的基本使用

box-shadow:[inset] h-shadow v-shadow blur spread color;

共有6个参数，其中inset可以省略，省略情况下默认为外阴影。此外分别是阴影水平偏移量、阴影垂直偏移量、阴影模糊半径、阴影扩展半径、阴影颜色。
实例：

<style> 
div{
    width:200px;height:200px;
    border:1px solid #ccc;
    box-shadow:
      0 0 20px purple;
    margin:20px;
  }
</style>
<body>
<div></div>
</body>

CSS3边界图片

border-image属性可以以图片作为div的边框

正式语法： <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

实例

边框图循环平铺

<style>
#repeat { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 repeat;
}
</style>
<body>
<div id="repeat">图片将会循环贴满边框区域</div>
</body>

2017-10-31 14-07-46屏幕截图.png

边框图自适应循环平铺

<style>
#round { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 round;
}
</style>
<body>
<div id="round">图片将会贴满边框区域</div>
</body>

2017-10-31 14-10-41屏幕截图.png