学习CSS3

weixin_47940048

已于 2023-09-05 22:08:17 修改

阅读量125

点赞数

分类专栏： html5和css3 文章标签：前端学习 css3

于 2022-07-07 09:37:47 首次发布

本文链接：https://blog.csdn.net/weixin_47940048/article/details/125636675

版权

html5和css3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、盒子阴影 box-shadow属性

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow: 10px 10px 5px #888888;

值	说明
h-shadow	必需的，水平阴影的位置，允许负值
v-shadow	必需的，垂直阴影位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的大小
color	可选，阴影的颜色
inset	可选，从外层的阴影（开始时）改变阴影内侧阴影

2、渐变（gradients）

css3渐变（gradients）可以让你在两个或者多个指定的颜色之间显示平稳的过渡

css3定义了两种类型的渐变(gradients)：

线性渐变（linear-gradient）：向下/向上/向左/向右/对角方向
径向渐变（radial-gradient）：由它的中心定义

线性渐变：

从上到下渐变：background-image: linear-gradient(#e66465, #9198e5);

多个颜色从上到下渐变：background-image: linear-gradient(red, yellow, green);

从左到右渐变：background-image: linear-gradient(to right, red , yellow);

从左上角到右上角：background-image: linear-gradient(to bottom right, red yellow);

指定角度：background-image: linear-gradient(-90deg, red, yellow);

彩虹颜色：

#rowcolor{
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

渐变使用透明度：background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

透明度（transparent）： 0表示完全透明，1表示完全不透明

重复的线性渐变：background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

径向渐变：background-image: radial-gradient(shape size at position, start-color,..., last-color);

shape：circle（圆形）、ellipse（椭圆，默认值）

size：closest-side、farthest-side、closest-corner、farthest-corner（默认值）

颜色节点均匀分布：background-image: radial-gradient(red, yellow, green);

颜色节点不均匀分布：background-image: radial-gradient(red 5%， yellow 15%, green 60%);

圆形的渐变：background-image: radial-gradient(circle, red, yellow, green);

带尺寸的渐变：background-image: radial-gradient(closest at 60% 55%, red, yellow, back);

重复的径向渐变：background-image：repeating-radial-gradient(red, yellow 10%, green 15%);

3、text-overflow属性

文本溢出属性，指定向用户如何显示溢出内容

 text-overflow: clip|ellipsis|string|initial|inherit;

值	属性
clip	剪切文本
ellipsis	显示省略符号...来表示被修剪的文本
string	使用给定的字符串来代表被修剪的文本
initial	设置位属性默认值
inherit	从父元素继承该属性

4、word-break和word-wrap属性

word-break: normal|break-all|keep-all;

normal：使用浏览器默认的换行规则

break-all：允许在单词内换行

keep-all：只能在半角空格或连字符处换行

word-wrap: normal|break-word;

normal：只在允许的短字点换行（浏览器保持默认处理）

break-word：在长单词或URL地址内部进行换行

5、word-spacing字间距和letter-spacing字符间距

word-spacing 表示字间距，对中文是无效的，仅对英文字单词起作用

letter-spacing属性用于设置文本字符的间距表现，对中文和英文都起效果

<style>
  h3 {
    word-spacing: 20px; /*英文单词间距*/
  }
  h3 span {
    letter-spacing: 20px; /*span标签中汉字间距*/
  }
</style>
<body>
  <h3>I love you<span>&nbsp;我的宝贝！</span></h3>
</body>

6、CSS按钮

可以直接使用font-size属性来设置按钮大小，使用opacity属性为按钮添加透明度（看起来类似disabled属性的效果），使用cursor属性并设置“not-allowed”来设置一个禁用的图片

.disabled {
    font-size: 20px;
    opacity: 0.6;
    cursor: not-allowed;
}

7、CSS分页实例

<style>
        ul.page {
            display: inline-block;
            padding: 0;
            margin: 0;
        }
        
        ul.page li {
            display: inline;
        }
        
        ul.page li a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
        }
        
        ul.page li a:active {
            background-color: #4CAF50;
            color: white;
        }
        
        ul.page li a:hover {
            background-color: #ddd;
        }
    </style>
<body>
    <ul class="page">
        <li><a href="#">«</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">»</a></li>
    </ul>
</body>

7、浏览器前缀

属性名	描述
-webkit-	谷歌浏览器的私有前缀
-moz-	火狐浏览器的私有前缀
-ms-	IE、Edge浏览器的私有前缀
-o-	欧朋浏览器的私有前缀

8、盒子模型占位计算

盒模型的内容区大小，可视宽高，盒模型实际占位宽度

1.盒模型的内容区大小

在标准盒子模型中 content内容区，也就是盒子里面能留给子元素的宽度和高度大小，也就意味着盒子里面的内容的最大面积就是width和height形成的矩形面积。

如果只有一个子元素，子元素的宽度超过父元素，就会溢出
如果有多个子元素，子元素（行内元素，行内块元素）的宽度加起来超过父元素，那么超过的那些子元素就会换行显示

2.盒模型可视宽高

可视区宽 = 宽度 + 左右内边距 + 左右边框宽

可视区高 = 高度 + 上下内边距 + 上下边框宽

3.盒模型实际占位宽度

实际占位宽 = 宽度 + 左右内边距 + 左右边框宽 + 左右外边距

实际占位高 = 高度 + 上下内边距 + 上下边框宽 + 上下外边距

9、box-sizing 怪异盒模型

标准盒模型：box-sizing: content-box; 盒子的大小会因为设置的内外边距和边框而变化，即外扩

怪异盒模型：box-sizing: border-box; 盒子的实际大小是设置的宽高，不会因为内外边距和边框的大小而变化，即内缩

将盒子添加box-sizing: border-box; 属性，盒子的width、height数字就表示盒子实际占有的宽度（不含margin）；即padding、border变为内缩的，不再外扩（box-sizing属性兼容到IE9）

box-sizing属性大量应用于移动网页制作中，因为它结合百分比布局、弹性布局等非常好用，在PC页面开发中使用较少

为什么div和button按钮的大小有差别（同样的代码，在浏览器中显示有差异）？

因为button按钮默认是怪异盒模型，即自带box-sizing: box-border; 属性。button是内缩的，div是外扩的

10、标准盒模型和怪异盒模型的区别

标准盒模型和IE盒模型的区别在于设置width和height属性时，所对应的范围不同：

标准盒模型的width和height属性的范围只包含了content内容区
IE盒模型（怪异盒模型）的width和height属性包含了border、padding和content
button标签是典型的怪异盒模型

weixin_47940048

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习CSS3

box-shadow: h-shadow v-shadow blur spread color inset;box-shadow: 10px 10px 5px #888888;css3渐变（gradients）可以让你在两个或者多个指定的颜色之间显示平稳的过渡css3定义了两种类型的渐变(gradients)：线性渐变：从上到下渐变：background-image: linear-gradient(#e66465, #9198e5);多个颜色从上到下渐变：background-image: linear
复制链接

扫一扫