css样式学习-边框
2017-10-31 本文已影响28人
Dl_毛良伟
在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
