CSS3

A2023270

于 2023-11-05 21:45:14 发布

阅读量15

点赞数

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/A2023270/article/details/134234709

版权

本文详细介绍了CSS中边框属性（border-radius,box-shadow,border-image）,背景属性（background-clip,background-origin,background-size）以及渐变、2D和3D转换、过渡和动画的使用方法。还展示了多列属性和按钮样式的应用示例。

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

文章目录

边框和背景

一.边框
属性：
border-radius 用于设置圆角
box-shadow 盒阴影
border-image 边界图片
二.背景
background-clip 规定绘制区域
background-origin 规定背景图片的定位区域
background-size 规定背景图片的尺寸
三.渐变
语法
background-image: linear-
gradient(direction,color-stop1,color-stop2,…)

动态效果

一.2D转换
1.translate
根据X轴和Y轴位置给定的参数使元素移动
2.rotate
旋转，负值为逆时针
3.scale
可使元素在变化过程中增大或减小
4.skew
包含两个参数值
5.matrix
包含旋转，缩放，移动和倾斜功能
二.3D转换
rotateX() 围绕X轴旋转
rotateY() 围绕Y轴旋转
三.过渡
属性：
transition
例如

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	transition:width 2s;
	-webkit-transition:width 2s; /* Safari */
}

div:hover
{
	width:300px;
}
</style>
</head>
<body>

<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

<div></div>

<p>鼠标移动到 div 元素上，查看过渡效果。</p>

</body>
</html>

在这里插入图片描述
四.动画
@keyframes规则
@keyframes规则是创建动画，在这一规则内指定一个CSS样式和动画逐级更改为新样式
属性：
animation

应用

一.多列
属性：
column-count 指定被分割的列数
column-fill 指定如何填充列
column-gap 指定列与列之间的间隙
column-rule-color/style/width 指定两列间边框的颜色/样式/宽度
column-span 指定元素要跨越多少列
column-width 指定列的宽度
二.按钮
用font-size属性设置按钮大小
box-shadow属性添加阴影

A2023270

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3

column-rule-color/style/width 指定两列间边框的颜色/样式/宽度。background-origin 规定背景图片的定位区域。background-size 规定背景图片的尺寸。background-clip 规定绘制区域。column-span 指定元素要跨越多少列。column-count 指定被分割的列数。column-gap 指定列与列之间的间隙。根据X轴和Y轴位置给定的参数使元素移动。column-fill 指定如何填充列。column-width 指定列的宽度。
复制链接

扫一扫