CSS3的属性

蓝搜香菇

已于 2023-09-22 16:14:52 修改

阅读量32

点赞数

文章标签： css3 css html

于 2023-09-22 16:09:38 首次发布

本文链接：https://blog.csdn.net/daiism/article/details/133014077

版权

本文介绍了CSS中的边框样式，包括默认值、不同类型的边框如solid、dashed等，以及圆角、box-shadow、背景图片、渐变效果（线性渐变和径向渐变）、文本效果（阴影和文本溢出）和自定义字体（font-face）的用法。

摘要由CSDN通过智能技术生成

边框属性

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

蓝搜香菇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
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-clip]指定背景图像区域位置；
复制链接

扫一扫