css3属性

最新推荐文章于 2024-05-23 11:00:50 发布

GU-MU-C

最新推荐文章于 2024-05-23 11:00:50 发布

阅读量18

点赞数

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/g_xlike/article/details/133981977

版权

边框属性

<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>

GU-MU-C

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3属性

使用透明度 : 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%);从左到右：background-image: linear-gradient(to right,颜色, 颜色);[background-image] 背景图片。
复制链接

扫一扫