CSS3的边框圆角背景

Posted 互联网IT信息

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3的边框圆角背景相关的知识，希望对你有一定的参考价值。


1CSS3边框


    用CSS3，可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如Photoshop。CSS3处理边框的三个关键属性：

    border-radius 圆角

    box-shadow  阴影

    border-image 边界图片

border-radius 圆角

    在CSS2中添加圆角棘手。不得不在每个角落使用不同的图像。在CSS3中，很容易创建圆角。在CSS3中border-radius属性被用于创建圆角：

    div

    {

    border:2px solid;

    border-radius:25px;

    }

效果图：

代码实例：


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>border-radius</title>

<style>

ul{margin:0;padding:0;}

li{list-style:none;margin:10px 0 0 0;padding:10px;background:#87CEFA;}

.test .one{border-radius:10px;}

.test .two{border-radius:10px 20px;}

.test .three{border-radius:10px 20px 30px;}

.test .four{border-radius:10px 20px 30px 40px;}

.test2 .one{border-radius:10px/5px;}

.test2 .two{border-radius:10px 20px/5px 10px;}

.test2 .three{border-radius:10px 20px 30px/5px 10px 15px;}

.test2 .four{border-radius:10px 20px 30px 40px/5px 10px 15px 20px;}

div{margin-top: 10px;border:2px solid #aaa;border-radius:25px;padding: 10px;width: 80px;}

</style>

</head>

<body>

<ul>

<li>提供1个参数<br />border-radius:10px;</li>

<li>提供2个参数<br />border-radius:10px 20px;</li>

<li>提供3个参数<br />border-radius:10px 20px 30px;</li>

<li>提供4个参数<br />border-radius:10px 20px 30px 40px;</li>

</ul>

<h2>水平与垂直半径不同时：</h2>

<ul>

<li>提供1个参数<br />border-radius:10px/5px;</li>

<li>提供2个参数<br />border-radius:10px 20px/5px 10px;</li>

<li>提供3个参数<br />border-radius:10px 20px 30px/5px 10px 15px;</li>

<li>提供4个参数<br />border-radius:10px 20px 30px 40px/5px 10px 15px 20px;</li>

</ul>

<div>圆角button</div>

</body>

</html>


box-shadow属性

    div

    {

    box-shadow: 10px 10px 5px #888888;

    }

效果图：

CSS3的边框、圆角、背景

代码实例：


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>box-shadow</title>

<style>

.test li {margin-top: 20px;list-style: none;width: 400px;padding: 10px;background: #eee;}

.test .outset {box-shadow: 5px 5px rgba(0, 0, 0, .6);}

.test .outset-blur {box-shadow: 5px 5px 5px rgba(0, 0, 0, .6);}

.test .outset-extension {box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);}

.test .inset {box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;}

.test .multiple-shadow {box-shadow:0 0 5px 3px rgba(255, 0, 0, .6),0 0 5px 6px rgba(0, 182, 0, .6),0 0 5px 10px rgba(255, 255, 0, .6);}

div{box-shadow: 10px 10px 5px #888888;width: 150px;height: 60px;background: orange;}

</style>

</head>

<body>

<ul>

<li>外阴影常规效果<br />box-shadow:5px 5px rgba(0,0,0,.6);</li>

<li>外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>

<li>外阴影模糊外延效果<br />box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);</li>

<li>内阴影效果<br />box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;</li>

<li>外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>

</ul>

<div></div>


</body>

</html>


border-image属性

    border-image属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像：在div中使用图片创建边框:

    .test {

    border-width: 2px 9px;

    border-style: solid;

    border-color: orange;

    width: 300px;

    border-image: url(img/button.png) 2 9 fill repeat;

    }

效果图：

CSS3的边框、圆角、背景

代码实例：


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>border-image</title>

<style>

.test {

border-width: 2px 9px;

border-style: solid;

border-color: orange;

width: 300px;

border-image: url(img/button.png) 2 9 fill repeat;

}

</style>

</head>

<body>

<div>用图片来做边框</div>

</body>

</html>

2CSS3圆角


    使用 CSS3 border-radius 属性，可以给任何元素制作 "圆角"。CSS3 border-radius - 指定每个圆角如果在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。

    但是，如果你要在四个角上一一指定，可以使用以下规则：

    四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

    三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

    两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

    一个值： 四个圆角值相同


#rcorners1 {

    border-radius: 25px;

    background: #87CEFA;

    padding: 20px; 

    width: 100px;

    height: 60px;    

}

#rcorners2 {

    border-radius: 25px;

    border: 2px solid #87CEFA;

    padding: 20px; 

    width: 100px;

}


效果图：

CSS3的边框、圆角、背景

代码实例：


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>border</title> 

<style> 

#rcorners1 {

    border-radius: 25px;

    background: #87CEFA;

    padding: 20px; 

    width: 100px;

    height: 60px;    

}

#rcorners2 {

    border-radius: 25px;

    border: 2px solid #87CEFA;

    padding: 20px; 

    width: 100px;

    height: 60px;    

}

</style>

</head>

<body>

<p>指定背景颜色元素的圆角:</p>

<p id="rcorners1">圆角</p>

<p>指定边框元素的圆角:</p>

<p id="rcorners2">圆角</p>

</body>

</html>

3CSS3背景


CSS3中包含几个新的背景属性，提供更大背景元素控制。

    background-image  背景图

    background-size 背景图片的尺寸

    background-origin  背景图片的定位区域

    background-clip 背景的绘制区域

CSS3 background-image属性

CSS3中可以通过background-image属性添加背景图片。

不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。


#example1 { 

    background-image: url(img_flwr.gif), url(paper.gif); 

    background-position: right bottom, left top; 

    background-repeat: no-repeat, repeat; 

}


CSS3 background-size 属性

   background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。

   CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。你可以指定像素或百分比大小。

  你指定的大小是相对于父元素的宽度和高度的百分比的大小。

案例效果图：

原始图片：

CSS3的边框、圆角、背景

应用css3样式之后：

CSS3的边框、圆角、背景

核心代码如下：

div

{

    background:url(img_flwr.png);

    background-size:80px 60px;

    background-repeat:no-repeat;

}

完整代码实例：


<!DOCTYPE html>

<html>

<head>

<style> 

body

{

background:url(img/img_flwr.png);

background-size:80px 60px;

-moz-background-size:80px 60px; /* 老版本的 Firefox */

background-repeat:no-repeat;

padding-top:80px;

}

</style>

</head>


<body>

<p>上面是缩小的背景图片。</p>


<p>原始图片：</p><img alt="Flowers">


</body>

</html>


CSS3的background-Origin属性

   background-Origin属性指定了背景图像的位置区域。

   content-box, padding-box,和 border-box区域内均可以放置背景图像。

案例效果图：

核心代码如下：

.border-box p{

background-origin:border-box;

}

完整代码实例：


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>background-origin</title>

<style>

h1{font-size:20px;}

h2{font-size:16px;}

p{border:10px dashed #666;

width:200px;

height:200px;

padding:20px;

background:#aaa

url(img/back-clip.png) no-repeat;}

.border-box p{background-origin:border-box;}

.padding-box p{background-origin:padding-box;}

.content-box p{background-origin:content-box;}

</style>

</head>

<body>

<h1>background-origin</h1>

<ul>

<li>

<h2>border-box</h2>

<p>从border区域（含border）开始显示背景图像</p>

</li>

<li>

<h2>padding-box</h2>

<p>从padding区域（含padding）开始显示背景图像</p>

</li>

<li>

<h2>content-box</h2>

<p>从content区域开始显示背景图像</p>

</li>

</ul>

</body>

</html>


CSS3 background-clip属性

CSS3中background-clip背景剪裁属性是从指定位置开始绘制。

案例效果图：

核心代码如下：

.text p{

width:auto;

height:auto;

background-repeat:

repeat;-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

font-weight:bold;font-size:120px;}

完整代码实例：


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>background-clip</title>

<style>

h1{font-size:20px;}

h2{font-size:16px;}

p{width:200px;

height:200px;

margin:0;

padding:20px;

border:10px dashed #666;

background:#aaa

url(img/back-clip.png) no-repeat;}

.border-box p{background-clip:border-box;}

.padding-box p{background-clip:padding-box;}

.content-box p{background-clip:content-box;}

.text p{width:auto;height:auto;background-repeat:repeat;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:bold;font-size:120px;}

</style>

</head>

<body>

<h1>background-clip</h1>

<ul>

<li>

<h2>border-box</h2>

<p>从border区域（不含border）开始向外裁剪背景</p>

</li>

<li>

<h2>padding-box</h2>

</li>

<li>

<h2>content-box</h2>

</li>

<li>

<h2>text</h2>

</li>

</ul>

</body>

</html>

以上是关于CSS3的边框圆角背景的主要内容，如果未能解决你的问题，请参考以下文章

css和css3的区别

css3新特性

CSS3学习

css3简易总结

css3知识总结

CSS3 | 分析