2019年2月16号--CSS3基础学习笔记（六）

程序员文章站 2022-04-28 23:41:01

...

2019年2月16号–CSS3基础学习笔记（六）

CSS3简介

css3是css的最新标准。
重要的新功能：
Border radius - 允许我们为元素创建圆角。
Border images - 允许我们指定一个图像作为元素周围的边框。
Multiple backgrounds - 将多个背景应用于元素。
动画(Animations)和特效(effects)，以及更多！

前缀

2019年2月16号--CSS3基础学习笔记（六）

CSS圆角

border-radius属性
通过border-radius属性可以给任何元素设置“圆角”。
HTML代码：

<html>
<head>
   <link rel="stylesheet" href="example.css">
</head>
<body>
	<div >W3c School</div>
</body>
</html>

CSS代码：

div {
   border-radius: 20px;
   background-color: green;
   color: white;
}

2019年2月16号--CSS3基础学习笔记（六）
border-radius的属性可以通过（左上角，右上角，右下角，左下角）的顺序进行设置。
2. 通过border-radius创建一个圆形
通过将元素的border-radius设置成元素高度以及宽度的一半可以将元素变成圆形。

CSS3阴影

box-shadow属性
box-shadow属性可以为元素增加阴影效果。

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

2019年2月16号--CSS3基础学习笔记（六）
HTML代码：

<html>
<head>
	<link rel="stylesheet" href="example.css">
</head>
<body>
	<div >W3c School</div>
</body>
</html>

CSS代码：

div {
   width: 300px;
   height: 100px;
   background-color: #9ACD32;
   box-shadow: 10px 10px #888888;
}

2019年2月16号--CSS3基础学习笔记（六）
4. box-shadow的模糊和扩散
除了颜色(color)外，box-shadow元素还有两个可选值，它们是模糊(blur)和扩散(spread)的。
CSS代码：

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

2019年2月16号--CSS3基础学习笔记（六）
5. 在box-shadow中使用负值
负值也可以用于box-shadow中：
h-shadow - 阴影将在框的左侧
v-shadow - 阴影将在框上方
blur - 不允许使用负值
spread - 负值会导致阴影缩小
6. 如何设置多个阴影
可以通过在同一个规则中使用 “,”（逗号）来定义多个阴影。

CSS3透明

透明效果
CSS3中可以通过设置RGBA来实现透明效果。
RGBA在RGB的基础上加入了Alpha通道，通过设置Alpha值可以实现透明的效果。

rgba(255, 255, 255, 0)

R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间
HTML代码：

<html>
<head>
	<link rel="stylesheet" href="example.css">
</head>
<body>
	<nav>
	    <ul>
			<li><a href="#">w3cschool</a></li>
			<li><a href="#">W3cschool</a></li>
			<li><a href="#">w3cSchool</a></li>
			<li><a href="#">W3cSchool</a></li>
	    </ul>
	</nav>
</body>
</html>

CSS代码：

body {
   background:url("https://www.w3cschool.cn/attachments/image/20180125/1516870677823170.jpg");
}
nav {
   padding: 50px 0;
   min-width: 500px; 
}
nav ul {
   background: linear-gradient(90deg, 
     rgba(255, 255, 255, 0) 0%, 
     rgba(255, 255, 255, 0.2) 25%, 
     rgba(255, 255, 255, 0.2) 75%, 
     rgba(255, 255, 255, 0) 100%);
   box-shadow: 0 0 25px rgba(0, 0, 0, 0.1),
     inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav ul li {
   display: inline-block;
}
nav ul li a {
   padding: 10px; 
   color: #FFFFFF;
   font-size: 18px;
   font-family: Arial;
   text-decoration: none;
   display: block;
 }

2019年2月16号--CSS3基础学习笔记（六）

CSS3文本阴影

如何设置多个文本阴影效果
在CSS3中越先定义的阴影效果会被放置在越顶层，反之则相反。
HTML代码：

<html>
<head>
	<link rel="stylesheet" href="example.css">
</head>
<body>
	<h1>W3CSCHOOL</h1>
</body>
</html>

CSS代码：

h1 {
   text-shadow: 5px 10px 2px #93968f, 
      -3px 6px 5px #58d1e3;
}

2019年2月16号--CSS3基础学习笔记（六）

CSS3伪类

如何使用伪类
CSS3中的伪类允许我们在不适用javascript等脚本的情况下去设置web页面中某些特定的元素的属性。
伪类通常以 “:”(冒号) 开头。:first-child和:last-child是较为常用的伪类。
:first-child将会匹配该元素中的第一个子元素。
:last-child则反之，匹配最后一个子元素。
HTML代码：

<html>
<head>
	<link rel="stylesheet" href="example.css">
</head>
<body>
	<div id="parent">
	   <p>First w3cschool</p>
	   <p>Second W3cschool</p>
	   <p>Third w3cSchool</p>
	   <p>Fourth W3cSchool</p>
	</div>
</body>
</html>

CSS代码：

#parent p:first-child {
   color: green;
   text-decoration: underline;   
}

2019年2月16号--CSS3基础学习笔记（六）
10. 如何使用伪元素
伪元素用于选择元素的特定部分。
在CSS中有五个伪元素，每个都以一个双冒号(::)开头：
::first-line- 选择器中文本的第一行
::first-letter - 选择器中文本的第一个字母
::selection - 选择用户选择的元素部分
::before - 在元素之前插入一些内容
::after - 在元素之后插入一些内容
在下面的例子中，::first-line伪元素用于为文本的第一行设置样式。
HTML代码：

<html>
<head>
	<link rel="stylesheet" href="example.css">
</head>
<body>
	<div id="parent">
	   <p>First w3cschool
	   <br>Second W3cschool
	   <br>Third w3cSchool
	   <br>Fourth W3cSchool</p>
	</div>
</body>
</html>

CSS代码：

p::first-line {
   color: #AE4141;
}

2019年2月16号--CSS3基础学习笔记（六）
::selection 伪元素对选定的文本进行设置样式。
CSS代码：

p::selection{
   background: #AE4141;
   color: #fff;
}
p::-moz-selection{
   background: #AE4141;
   color: #fff;
}

2019年2月16号--CSS3基础学习笔记（六）
使用-moz-前缀，因为Mozilla不支持:: selection元素。

如何使用伪元素
使用::before和::after伪元素允许我们向页面添加各种各样的内容。
HTML代码：

<html>
<head>
	<link rel="stylesheet" href="example.css">
</head>
<body>
   <p>First w3cschool</p>
   <p>Second W3cschool</p>
   <p>Third w3cSchool</p>
   <p>Fourth W3cSchool</p>
</body>
</html>

CSS代码：

p::before {
   content: url("http://statics.w3cschool.cn/images/w3c/index-logo.png");
}

2019年2月16号--CSS3基础学习笔记（六）
请注意样式中的content关键字

CSS3自动换行

word-wrap属性
word-wrap属性允许对长单词进行自动换行处理。
它的值可以为：
normal
break-word
HTML代码：

<html>
<head>
	<link rel="stylesheet" href="example.css">
</head>
<body>
   <p>Firstw3cschool,SecondW3cschool,Thirdw3cSchool,FourthW3cSchool</p>
</body>
</html>

CSS代码：

p {
   width: 100px; 
   height: 100px;
   border: 1px solid #000000;
   word-wrap: normal;
}

2019年2月16号--CSS3基础学习笔记（六）
接下来我们将word-wrap的属性设置为break-word，然后再看一下效果。
CSS代码：

p {
   width: 100px; 
   height: 150px;
   border: 1px solid #000000;
   word-wrap: break-word;
}

2019年2月16号--CSS3基础学习笔记（六）

aaa@qq.com

@font-face 规则
@ font-face规则允许将自定义字体加载到网页中。借助于此规则，设计不再局限于安装在用户计算机上的字体。在Internet Explorer 8和更低版本中，URL必须指向Embedded OpenType（eot）文件，而Firefox，Chrome等支持True Type字体（ttf）字体和OpenType字体（otf）。
使用@font-face规则
必须使用@font-face规则声明每种形式的字体系列。在下面的例子中，一个名为“Delicious”的自定义字体被加载并用于标题。
HTML代码：

<html>
<head>
	<link rel="stylesheet" href="example.css">
</head>
<body>
   <h1>w3cschool</h1>
</body>
</html>

CSS代码：

@font-face {
  font-family: Delicious; 
  src: url('Delicious-Roman.otf'); 
} 
@font-face { 
  font-family: Delicious; 
  font-weight: bold; 
  src: url('Delicious-Bold.otf'); 
}
h1{
   font-family: Delicious, sans-serif; 
}

当定义了多个@font-face规则时，Internet Explorer有一个内置的错误。如下所示使用#iefix修复了这个问题：

@font-face { 
   font-family: Delicious; 
   src: url('Delicious-Roman.ttf');
   src: url('Delicious-Roman.eot?#iefix'); 
}

2019年2月16号--CSS3基础学习笔记（六）