CSS3属性概念

excavate
403 阅读6分钟

如今很多新的 CSS3 属性出现可以建立丰富的布局，如创建圆角、渐变和阴影以及调整透明度等。

1.为元素创建圆角

使用 CSS3 可以在不引入额外的标记或图像的情况下，为大多数元素（包括表单元素、图像甚至段落文本）创建圆角。为元素创建圆角使用 border-radius属性。

-1.创建四个相同的圆角：border-radius：r ；这里的 r 是圆角的半径大小，表示长度（带单位）。

 corners{
	border-radius : 20px;
 }

-2.为元素创建一个圆角

  • 创建右上方圆角：border-top-right-radius:r

  • 左上方圆角： border-top-left-radius:r

  • 右下方圆角： border-bottom-right-radius:r

  • 左上方圆角： border-bottom-left-radius:r

    corners{
        border-bottom-left-radius : 75px;
 }

-3.创建椭圆形圆角 border-radius: x / y 其中 x 是圆角在水平方向上的半径大小，y 是圆角在垂直方向上的半径大小。

corners{
        border-radius: 50px / 20px;
}

-4.使用border-radius创建圆形：border-radius：r 其中r是元素半径的大小。

corners{
          border-radius : 50%;
       }

2.为文本添加阴影

为元素的文本添加阴影：text-shadow属性： 分别输入 x-offset（水平偏移量），y-offset（垂直偏移量）、blur-radius（模糊半径）和 color值。

例如：-2xp 3xp 7xp #999。（如果不指定 blur-radius 则其假定默认值为0）。

text-shadow：none改回默认值。

.basic{
	text-shadow : 3px 3px  #aaa;
}
.negative{
	text-shadow : -4px -2px #ccc;
}
.blur{
	text-shadow : 2px 2px 10px grey;
}
.inversed{
	color:white;
	text-shadow : 2px 2px 10px #000;
}
.multiple{
	text-shadow : 2px 2px white,
	6px,6px,rgba (50,50,50,.25);
}

3.为其他元素添加阴影

使用 box-shadow属性 可以为元素本身添加阴影，它与 text-shadow 属性相同，但是 box-shadow 还允许使用两个可选的属性 inset 关键词属性和 spread 属性用于扩张或收缩阴影。

box-shadow 属性接受六个值：带长度单位的 x-offset和 y-offset、可选的带长度单位的 blur-radius、可选的inset 关键字。可选的带长度单位的 spread 和 color 值。如果不指定 blur-radius 和 spread 的值则默认为0。

-1.为元素添加阴影box-shadow：分别输入x-offset、y-offset、blur-radius、spread、color值。

-2.创建内阴影 box-shadow：分别输入x-offset、y-offset、blur-radius、spread、color值。在冒号后输入inset。

-3.为元素应用多重阴影：输入x-offset、y-offset、blur-radius、spread、color值，在输入逗号重复前面所诉步骤。

.basic{
	box-shadow : 3px 3px 5px #aaa;
}
.negative{
	box-shadow : -4px -4px 5px #ccc;
}
.blur{
	box-shadow : 4px 4px 5px 3px grey;
}
.inversed{
	
	box-shadow : 0 0 9px 3px #999;
}
.multiple{
	box-shadow : 2px 2px 10px #666 inset;  /*创建内阴影*/
}
.multiples{
	box-shadow : 2px 2px 10px rgba(255,0,0.75),
	5px 5px 20px blue;
}

4.应用多重背景

为单个 HTML 元素指定多个背景是 CSS3 引入的一个特性，指定多重背景便可以简化 HTML 代码，并让它容易理解和维护。多重背景几乎可以应用于任何元素。

  • ①为单个元素应用多重背景图像：background-color : b,这里的 b 是希望为元素应用的备用背景颜色。

  • ②输入background-image ：u，这里的 u 是绝对或相对路径图像引用的URL列表。

  • ③输入background-position : p，这里的 p 是成对的 x-offset、y-offset 的集合。

  • ④输入background-repeat ：r，这里的 r 是 repeat-x,repeat-y或no-repeat 值。

    .night-sky{

background-color: navy;/* 备用 当图片未显示时默认的背景颜色*/
    
background-image: 
                         url(xxx.png),url(zzz.png)
                         url(iii.png),url(eee.png);

background-position: 
                        50% 102%,100% -150px,
                        0 -150px,50% 100%;

background-repeat: 
                        no-repeat,no-repeat,
                        no-repeat,repeat-x;

            height: 300px;
            margin: 0 auto;
            padding-top: 36px;
            width: 75%;
 }

5.使用渐变背景

通过渐变背景可以在不使用图像的情况下创建一种颜色到另一种颜色的过渡。

创建备用背景颜色：background-color:color。

1）定义线性渐变：输入background:linear-gradient ( 如果希望渐变方向从上往下（默认）则跳过该步。输入方向后面加一个逗号，这里方向指的是： to top、to right、to left、to bottom right、to bottom left、to top right 或 to top left 这样的值。或者输入方向后面加一个逗号，这里 方向指的是角度值（45deg、107deg、180deg 或 310deg）。然后根据稍后介绍的“指定颜色或指定颜色和颜色停止位置”，定义渐变的颜色。）

2）定义径向渐变：1）输入background:radial-gradient(指定渐变的尺寸。输入 size。这里 size 可以同时代表渐宽和高度的一个长度值（200px 或 7em），也可以是代表宽度和高度的一对值（ 60% 85% 或 390px 175px）。如果只使用一个值，则这个值不能是百分数。

或者输入 size，这里的 size 是 closest-side、farthest-side、closest-corner 或 farthest-corner。这些关键字代表相对于渐变的中心，渐变可以伸展到多大空间。

3）指定渐变的位置

如果希望渐变从中心开始（默认）则跳过此步。输入pos，这里的pos是at top、at right、at left、at bottom right、at bottom left、at top right或at top left等表示渐变中心位置的值。

或者输入 pos，这里的 pos 是表示渐变中心位置的一对坐标，并以 at 开头。例如 at 200px 43px、at 33% 70% 、at 50% -10px。

4）指定颜色

输入至少两种颜色，每个颜色直接逗号分隔。指定第一个颜色出现渐变的开始位置，最后一个颜色出现在渐变的结束位置。

5）指定颜色和颜色的停止位置：对需要的每个颜色指定一个百分数以控制颜色出现在渐变中的位置，这个数可以是负数，也可以是大于100%的数。

看一点代码示例：

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	body{
		width: 400px;
		height: 600px;
	}
	.vertical-dowb{
		width: 200px;
		height: 200px;
		background : silver;
		background : linear-gradient ( to right,silver,black);
	}
	.vertical-up{
		width: 200px;
		height: 200px;
		background : aqua;
		background : linear-gradient ( 120deg,aqua,navy);
	}
	.vertical-rt{
		width: 200px;
		height: 200px;
		background : red;
		background : radial-gradient (at top,yellow,red);
	}
	.vertical-tl{
		width: 200px;
		height: 200px;
		background : red;
		background : radial-gradient (closest-side at 70px 60px,yellow,lime,red);
	}
</style>
 </head>
 <body>
         <div class="vertical-dowb"><p>like </p></div>
         <div class="vertical-up"><p>like</p></div>
         <div class="vertical-rt"><p>like</p></div>
         <div class="vertical-tl"><p>like</p></div>
 </body>
 </html>

6.为元素设置不透明度

使用opacity属性可以修改元素的透明度（包括图片）。opacity : o,这里的 o 表示元素的不透明程度（两位小数，不带单位）。

  .box{
	background: #000;
	opacity: .5;
	}

7.生成内容效果

使用：before 和 after 伪元素可以很方便地为页面添加一些令人难以置信的效果，他们可以与 content 属性结合使用，从而生成所谓的生成内容，生成内容指的是通过 CSS 创建的内容，而不是由 HTML 生成的。来看一个最简单的例子：

    <!DOCTYPE html>
    <html lang="en">
    <head>
<meta charset="UTF-8">
<title>Document</title>

<style>
.more:after{
	content: "》" 
      /*现在带有class="more"的元素会在其后显示一个双箭头*/
}
  </style>

  </head>

  <body>
<p> <a href="xxx.html" class="more"> Read More </a> </p>
 </body>

 </html>
avatar
文章
阅读
粉丝