CSS3新特性(2-1)-CSDN博客

本文链接：https://blog.csdn.net/lplovewjm/article/details/134608524

本文介绍了CSS3的四个新特性：圆角边框border-radius，属性选择器用于根据标签属性值添加样式，box-sizing控制盒模型，以及新增的透明度opacity。通过实例展示了如何在代码中应用这些特性。

摘要由CSDN通过智能技术生成

CSS3新特性

前言
border：radius
标签属性选择器
box-sizing
透明度

前言

本文主要讲解CSS3有哪些新的特性和内容，那么好，本文正式开始.

border：radius

新增了圆角边框概念，可以通过具体数值或者百分比，来让边框呈现不同的圆角。如：

<!DOCTYPE html>
<html>
<head>
  <style>
    div{
		width:100px;
		height:100px;
		border:1px solid gray;
		border-radius: 50%;	}
  </style>
</head>
<body>
	<div></div>
</body>
</html>

在这里插入图片描述
在上述代码中，我们就通过border-radius:50%让这个块的圆角为50%，就成功的做出了一个圆形结构。

标签属性选择器

我们知道标签选择器，伪类选择器，Id选择器，都是用来给某个标签进行样式处理的，而CSS3中新增了一个属性选择器，那属性选择器具体就是可以根据某个标签的属性值来进行判断和添加样式，如：

<!DOCTYPE html>
<html>
<head>
  <style>
	  input[type='text']{
		  border:1px solid red;
	  }
  </style>
</head>
<body>
	<input type="text"><br>
	<input type="number">
</body>
</html>

在这里插入图片描述
在上述代码中，我们看到这两个输入框的边框颜色不同，上面input边框是红色的，是因为我们给它添加了一个标签属性选择器，这个属性选择器只会给和它属性值相同的标签添加样式。

box-sizing

在正常的宽高布局中，我们会发现，一个块级盒子的宽高，是受到它的边框和内边距影响的，也就是说，这个块级盒子占据空间大小，是它的宽高+边框+内边距，而不仅仅是它的宽高，而CSS3新增的box-sizing的价值就在让它占据的空间就等于宽高，而内边距和边框都在宽高的范围内。它默认content-box的值就是占据空间=宽高+内边距+边框，而当它设置成border-box属性时。则占据空间=宽高（内边距+边框）。举例：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <style>
	  .normal{
		  width:100px;
		  padding:50px;
		  height:100px;
		  border:1px solid gray;
	  }
	  .borderbox{
		  box-sizing: border-box;
		  width:100px;
		  padding:50px;
		  height:100px;
		  border:1px solid gray;
	  }
  </style>
</head>
<body>
	<div class="normal"></div>
	<div class="borderbox"></div>
</body>
</html>

前者就为没有设置box-sizing:border-box，它的占据空间明显要比设置了的大很多，因为它除了宽高还有内边距和边框的占比。

透明度

新增了opacity透明度，也就是一个块是否透明，最大为1，最小为0，支持小数点，举例:

<!DOCTYPE html>
<html>
<head>
  <style>
	  .normal{
		  width:100px;
		  padding:50px;
		  height:100px;
		  background-color: gray;
		  opacity: 0.5;
	  }
  </style>
</head>
<body>
	<div class="normal"></div>
</body>
</html>