CSS3样式

2024-01-07 16:34:40

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