CSS3属性

最新推荐文章于 2023-04-27 15:01:35 发布

逻辑鬼才不太聪明

最新推荐文章于 2023-04-27 15:01:35 发布

阅读量187

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_42919799/article/details/109280909

版权

css 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

CSS3属性

https://github.com/qianguyihao/Web/blob/master/02-CSS%E5%9F%BA%E7%A1%80/11-CSS3%E5%B1%9E%E6%80%A7%E8%AF%A6%E8%A7%A3%EF%BC%88%E4%B8%80%EF%BC%89.md

文本

text-shadow设置文本的阴影

text-shadow:20px 27px 22px pink;
//解析：水平位移 垂直位移 模糊程度 阴影颜色

盒子模型中的`box-sizing`属性

css3对盒子模型做出的新的定义，“允许开发人员指定盒子宽度和高度的计算方式”

外加模式（css3的默认模式）：

box-sizing: content-box;

注：此时设置的width和height 是内容区域的宽高。盒子的实际宽度= 设置的width + padding + border此时改变padding和border的大小，也不会改变内容的宽高，而是盒子的总宽高

内减模式

box-sizing:border-box;

注：此时设置的width和height是盒子的总宽高。盒子的实际宽度 = 设置的width。此时改变padding和border 的大小，会改变内容的宽到，盒子的总宽高不变。

处理兼容性问题：私有前缀

处理兼容性问题的常见方法：为属性添加私有前缀。

私有前缀举例：

background:linear-gradient(left,green,yellow);
//上面的属性的左右：添加从左到右的线性渐变，颜色从绿色到黄色。

为每一个浏览器添加不同的私有前缀，属性就可以生效了。

格式：

-webkit:谷歌 苹果
-moz:火狐
-ms:IE
-o-:欧朋

例：

    background: -webkit-linear-gradient(left, green, yellow);
    background: -moz-linear-gradient(left, green, yellow);
    background: -ms-linear-gradient(left, green, yellow);
    background: -o-linear-gradient(left, green, yellow);
    background: linear-gradient(left, green, yellow);

边框

边框属性中“边框圆角”，“边框阴影”应用广泛，兼容性也相对较好，符合“渐进增强”的原则。

边框圆角：border-radius属性

圆有水平半径和垂直半径

单个属性的写法：

border-top-left-radius: 60px 120px;//解释：水平半径  垂直半径

复合写法：

border-radius:60px/120px;//解释：水平半径/垂直半径
border-radius：20px 60px 100px 140px;//从左上开始，顺时针赋值，如果当前角没有值，取对角的值

最简洁的写法：（四个角的半径都相同时）

border-radius: 60px;

边框阴影：`box-shadow`属性

格式：

box-shadow:水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
box-shadow: 15px 21px 48px -2px #666;

参数解释：

水平偏移：正值向右负值向左
垂直偏移：正值向下负值向上
模糊程度：不能为负值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #eee;
        }
        .box{
            width: 200px;
            height: 300px;
            margin: 100px auto;
            background-color: #fff;
            border: 1px solid #000;
            box-shadow: 15px 21px 48px -2px #666;/*外阴影*/
            box-shadow: 15px 21px 48px -2px #666 inset;/*内阴影*/
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

后面可以加一个inset属性，表示内阴影，如果不写，则默认表示外阴影。

box-shadow: 15px 21px 48px -2px #666;/*外阴影*/
box-shadow: 15px 21px 48px -2px #666 inset;/*内阴影*/

注意：设置边框的阴影不会改变盒子的大小，也不会影响其兄弟元素的布局。

可以设置多重边框阴影，实现更好的效果，增加立体感

边框图片

边框图片的属性

	/* 边框图片的路径*/
	border-image-source: url("images/border.png");

	/* 图片边框的裁剪*/
	border-image-slice: 27;

	/*图片边框的宽度*/
	border-image-width: 27px;

	/*边框图片的平铺*/
	/* repeat :正常平铺 但是可能会显示不完整*/
	/*round: 平铺 但是保证 图片完整*/
	/*stretch: 拉伸显示*/
	border-image-repeat: stretch;

可以写一个综合属性：

 border-image: url("images/border.png") 27/20px round;

逻辑鬼才不太聪明

关注

1
点赞
踩
0

收藏

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

CSS3属性https://github.com/qianguyihao/Web/blob/master/02-CSS%E5%9F%BA%E7%A1%80/11-CSS3%E5%B1%9E%E6%80%A7%E8%AF%A6%E8%A7%A3%EF%BC%88%E4%B8%80%EF%BC%89.md文本text-shadow设置文本的阴影text-shadow:20px 27px 22px pink;//解析：水平位移垂直位移模糊程度阴影颜色盒子模型中的box-sizing属性css
复制链接

扫一扫