边框属性
<style>
.box{
border-left-style: double;
width: 300px;
height: 300px;
}
</style>
<body>
<div class="box"></div>
</body>
属性 | |
---|---|
none | 默认值,忽略所有边框宽度 |
solid | 单实线 |
dashed | 虚线 |
dotted | 点线 |
double | 双实线 |
border-radius 圆角 ,可设值和margin类似
border-radius:50%;就是设置圆
box-shadow:水平 垂直 大小 颜色;设置阴影
border-image: url(…/…/2.png) 0 3 repeat;背景图片
repeat铺满
background-origin
指定背景图像区域位置
值 | |
---|---|
padding-box | |
border-box | |
content-box |
background-clip
裁剪区域
值 | |
---|---|
padding-box | |
border-box | |
content-box |
background简写的所有值
[background-color] 背景颜色 ; [background-image] 背景图片
[background-position]起始位置;[background-size] 大小; [background-repeat] 是否平铺
[background-attachment]设置背景图像是否固定或者随着页面的其余部分滚动
[background-clip]指定背景图像区域位置; [background-origin]裁剪区域
渐变效果
1.线性渐变Linear Gradients
-
默认情况:从上到下background-image: linear-gradient(颜色, 颜色,…);
-
从左到右:background-image: linear-gradient(to right,颜色, 颜色);
-
从右到左:background-image: linear-gradient(to left,颜色, 颜色);
-
从上到下:background-image: linear-gradient(to top,颜色, 颜色);
-
对角方式:background-image: linear-gradient(to bottom right,颜色, 颜色);
-
设置角度:background-image: linear-gradient(90deg,red,#000); 角度设置可正可负
-
透明度transparent
-
使用透明度 : background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
-
重复线性渐变 : background-image: repeating-linear-gradient(red,black 20%,green 10%);
2.径向渐变Radial Gradients
由它们的中心定义
background-image: radial-gradient(形状 大小 at 位置, 颜色, …,颜色);
形状只有circle 圆形, ellipse 椭圆(默认值)两个值
大小的值 | |
---|---|
farthest-corner | 指定径向渐变的半径长度为从圆心到离圆心最远的角(默认值) |
closest-side | 指定径向渐变的半径长度为从圆心到离圆心最近的边 |
closest-corner | 指定径向渐变的半径长度为从圆心到离圆心最近的角 |
farthest-side | 指定径向渐变的半径长度为从圆心到离圆心最远的边 |
重复线性渐变
background-image: repeating-radial-gradient(circle,closest-side at 50% 50%,red 10%,black 10%);
文本效果
阴影效果
text-shadow | 文字阴影 |
---|---|
text-Overflow | 文本溢出显示内容 |
word-wrap:break-word; | 某个单词太长,会强制性换行 |
word-break:keep-all; | 单词换行 |
字体
@font-face规则
可以引用当前电脑没有的字体
<style>
@font-family{
font-family:myFirstFont;/*名称*/
src:url();/*字体文件*/
}
</style>