CSS3引入了哪些令人兴奋的新技术？

CSS3中的5个有趣新技术包括：1. Flexbox布局；2. Grid布局；3. 动画和过渡；4. 媒体查询；5. 变量。

CSS3中的5个有趣的新技术

CSS3引入了哪些令人兴奋的新技术？

圆角（Border-Radius）

属性名称	描述
border-radius	border-radius属性允许开发者为元素的边框创建圆角，通过调整该属性的值，可以控制圆角的半径大小。

示例代码：

#round {
    background-color: #000;
    border: 1px solid #000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

个别圆角（Individual Border-Radius）

属性名称	描述
border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius	这些属性允许开发者分别为元素的每个角设置不同的圆角半径，从而创建出独特的形状。

示例代码：

#indie {
    background-color: #000;
    border: 1px solid #000;
    -moz-border-top-right-radius: 10px;
    -moz-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
}

不透明度（Opacity）

CSS3引入了哪些令人兴奋的新技术？

属性名称	描述
opacity	opacity属性用于设置元素及其内容的不透明度，值范围从0（完全透明）到1（完全不透明）。

示例代码：

#opacity {
    background-color: #000;
    opacity: 0.3;
}

阴影（Box Shadow）

属性名称	描述
box-shadow	box-shadow属性允许开发者为元素添加阴影效果，它支持多种参数设置，包括水平偏移、垂直偏移、模糊半径和阴影颜色。

示例代码：

#shadow {
    background-color: #fff;
    border: 1px solid #000;
    -webkit-box-shadow: 3px 5px 10px #ccc;
}

调整元素大小（Resize）

属性名称	描述
resize	resize属性允许用户通过拖动来调整元素的大小，这对于图像和其他需要用户交互调整大小的元素非常有用。

示例代码：

CSS3引入了哪些令人兴奋的新技术？

#resize {
    background-color: #fff;
    border: 1px solid #000;
    resize: both;
}