2024年6月6日发(作者：)

CSS3学习笔记

border-radius:25px 0 25px 0;

设置圆角，分别是左上，右上，右下，左下

box-shadow: X

轴偏移量

Y

轴偏移量

[

阴影模糊半径

] [

阴影扩展半径

] [

阴影颜色

] [

投影方式

];

box-shadow:4px 4px 6px #666;

外阴影

box-shadow:4px 4px 6px #666 inset;

内阴影

box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;

多阴影

图片边框

border-image:url("/") 15 repeat ;

颜色

RGBA

color

：

rgba(R,G,B,A)

background-color:rgba(100,120,60,0.5);

渐变色彩

线性渐变

参数

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

text-overflow 与 word-wrap

但是

text-overflow

只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号省略号的效果，还须定义

强制文本在一行内显示（强制文本在一行内显示

white-space:nowrap

）及溢出内容为隐藏溢出内容为隐藏（

overflow:hidden

），只有这样才能实

现溢出文本显示省略号溢出文本显示省略号的效果，代码如下：

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

word-wrap

也可以用来设置文本行为文本行为，当前行超过指定容器的边界时是否断开转行。

语法：

normal

为浏览器默认值，

break-word

设置在长单词长单词或

URL

地址内部进行换行，此属性不常用，用浏览器地址

默认值即可。

嵌入字体@font-face

@font-face

能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。

语法：

@font-face {

font-family :

字体名称自定义的名称，以备后面调用

;

src :

字体文件在服务器上的相对或绝对路径

;

}

@font-face {

font-family: "shenymce Font";

src: url("/");

}

这样设置之后，就可以像使用普通字体一样在（（

font-*

）中设置字体样式。

比如：

p {

font-size :12px;

font-family : "My Font";

/*

必须项，设置

@font-face

中

font-family

同样的值

*/

}