CSS3样式

最新推荐文章于 2025-03-29 15:21:29 发布

沐子**

最新推荐文章于 2025-03-29 15:21:29 发布

阅读量140

点赞数

文章标签： css3

本文链接：https://blog.youkuaiyun.com/qq_43737870/article/details/112910208

版权

CSS3

1.圆角边框border-radius

在这里插入图片描述

2.阴影box-shadow

inset：水平偏移，垂直偏移，模糊距离，颜色
inset：可选，内部阴影
outset：默认值，外部阴影

div{width：300px;
height:100px;
background-color:#f90;
box-shadow:10px 10px 5px #888;
}

文字文本

1.text-shadow属性：水平偏移、垂直偏移、阴影大小、颜色

h1{ text-shadow:2px 2px #FF0000;}
h1{ text-shadow:2px 2px 8px bule;}

2.word-wrap属性
允许长单词、url强制进行换行

<style>
	p.wdrp{
		width:8em;
		border:1px solid#333;
		word-wrap:break-word;
		 }
</style>
<body>
<p class="wdrp">这是最长的单词</p>
</body>

3.使用特殊字体，将下载的字体放在font文件下下
在这里插入图片描述

2D转换

1.旋转transform：rotate（deg）；
在这里插入图片描述
2.缩放transform：scale（x，y）
x:水平缩放倍数
y: 垂直缩放倍数
0~1缩小，>1放大

过渡与动画

1.过渡：transition属性，将元素每个属性从一个值在指定时间过渡到另一个值
transition-property 属性名、all对哪一个属性进行变化
transition-duration 持续时间
transition-timing-function 过渡使用方法（函数）
transition-delay
在这里插入图片描述

2.动画animation