CSS3基础内容总结（一）

最新推荐文章于 2024-03-02 16:09:14 发布
最新推荐文章于 2024-03-02 16:09:14 发布
阅读量284 收藏
点赞数
分类专栏： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzk00007/article/details/100531682
版权

CSS3 简介

CSS3已经完全向后兼容，所以你就不必改变现有的设计。浏览器一般情况下都会支持CSS2。

CSS3 模块

CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。

一些最重要CSS3模块如下：

CSS3建议

W3C的CSS3规范目前已经开发的差不多，并且已经有许多新的CSS3属性已在现代浏览器使用，所有学习CSS3对于您是非常必要的，下面开始您的学习吧！

CSS3 边框

用CSS3，您可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序（如Photoshop等作图软件），极大地帮助您节省了很多时间。

而在本节中，您将了解以下的边框属性有：

  • border-radius

  • box-shadow

  • border-image（需要注意的是：该属性不支持ie浏览器）

Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。

Firefox、Chrome 以及 Safari 支持所有新的边框属性。

注释：对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。

Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-。

CSS3 圆角

在CSS2中添加圆角是需要一些技巧的，尤其对于新手来说更加难了，所有我们不得不在每个角落使用不同的图像。

但是如果您在CSS3中，就能够很容易创建圆角。在CSS3中border-radius属性就是被用于创建圆角的：

以下示例即：圆角边框，您可以尝试着做一个！

实例

在div中添加圆角元素：

div
{
border:2px solid;
border-radius:25px;
}


尝试一下 »

 

CSS3盒阴影

CSS3中的box-shadow属性被用来添加阴影:

实例

在div中添加box-shadow属性

div
{
box-shadow: 10px 10px 5px #888888;
}


尝试一下 »

 

CSS3边界图片

有了CSS3的border-image属性，你可以使用图像创建一个边框：

border-image属性允许你指定一个图片作为边框！用于创建上文边框的原始图像：

在div中使用图片创建边框:

Border

实例

在div中使用图片创建边框

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}


尝试一下 »

 

新边框属性

属性说明CSS
border-image设置所有边框图像的速记属性。3
border-radius一个用于设置所有四个边框- *-半径属性的速记属性3
box-shadow附加一个或多个下拉框的阴影3

以上就是本节的全部内容，关于CSS3边框，您是否学会了呢？如果还是有些疑惑，建议您多看几遍，或者对着上文中的示例多做几遍！

CSS3 圆角

使用了CSS3 border-radius属性的界面显示如下图：

CSS3 圆角

使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。

您可以尝试使用CSS3 圆角制作器制作您的第一个css3圆角！

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。

属性     
border-radius9.05.0
4.0 -webkit-		4.0
3.0 -moz-		5.0
3.1 -webkit-		10.5

CSS3 border-radius 属性

使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。

以下为三个实例：

1. 指定背景颜色的元素圆角：

圆角！

2. 指定边框的元素圆角:

圆角！

3. 指定背景图片的元素圆角:

圆角！

代码如下:

实例

#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners3 {
    border-radius: 25px;
    background: url(/statics/images/course/paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}


尝试一下 »

CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

  • 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

  • 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

  • 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

  • 一个值： 四个圆角值相同

以下为三个实例:

1. 四个值 - border-radius: 15px 50px 30px 5px:

2. 三个值 - border-radius: 15px 50px 30px:

3. 两个值 - border-radius: 15px 50px:

以下为源代码:

实例

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners6 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}


尝试一下 »

您还可以创建椭圆边角:

实例

#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}


尝试一下 »

CSS3 圆角属性

属性描述
border-radius所有四个边角 border-*-*-radius 属性的缩写
border-top-left-radius定义了左上角的弧度
border-top-right-radius定义了右上角的弧度
border-bottom-right-radius定义了右下角的弧度
border-bottom-left-radius定义了左下角的弧度

通过以上5种圆角属性，希望您能够做出最满意的圆角。

CSS3 圆角生成器

在线CSS3 圆角生成器

 

CSS3 背景

CSS3更新了几个新的背景属性，提供更大背景元素控制，通过这几个背景属性，您能够做出更加精美的样式，。

在本节中您将了解以下4种背景属性：

  • background-image
  • background-size
  • background-origin
  • background-clip

此外您还将学习如何使用多重背景图像。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性     
background-image
(with multiple backgrounds)		4.09.03.63.111.5
background-size4.0
1.0 -webkit-		9.04.0
3.6 -moz-		4.1
3.0 -webkit-		10.5
10.0 -o-
background-origin1.09.04.03.010.5
background-clip4.09.04.03.010.5

CSS3 background-image属性

CSS3中可以通过background-image属性添加背景图片。

不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

实例

#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}


尝试一下 »

 

可以给不同的图片设置多个不同的属性

实例

#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}


尝试一下 »

 

CSS3 background-size 属性

background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。

CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。

你指定的大小是相对于父元素的宽度和高度的百分比的大小。

OperaSafariChromeFirefoxInternet Explorer

实例 1

重置背景图像：

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}


尝试一下 »

 

OperaSafariChromeFirefoxInternet Explorer

实例 2

伸展背景图像完全填充内容区域：

div
{
background:url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}


尝试一下 »

 

CSS3的background-Origin属性

background-Origin属性指定了背景图像的位置区域。

content-box, padding-box,和 border-box区域内可以放置背景图像。


 

OperaSafariChromeFirefoxInternet Explorer

实例

在 content-box 中定位背景图片：

div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}


尝试一下 »

 

CSS3 多个背景图像

CSS3 允许你在元素中添加多个背景图像。

OperaSafariChromeFirefoxInternet Explorer

实例

在 body 元素中设置两个背景图像：

body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}


尝试一下 »

 

CSS3 background-clip属性

CSS3中background-clip背景剪裁属性是从指定位置开始绘制

实例

#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}


尝试一下 »

 

新的背景属性

顺序描述CSS
background-clip规定背景的绘制区域。3
background-origin规定背景图片的定位区域。3
background-size规定背景图片的尺寸。3

新的CSS3背景属性中，您不仅能够规定背景的绘制区域，对于背景图片的定位区域和尺寸也同样能够惊喜设置！

CSS3 渐变（Gradients）

线性渐变

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

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

  • 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

  • 径向渐变（Radial Gradients）- 由它们的中心定义

浏览器支持

表中的数字指定了完全支持该属性的第一个浏览器版本。

后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能支持属性的第一个版本。

属性     
linear-gradient10.026.0
10.0 -webkit-		16.0
3.6 -moz-		6.1
5.1 -webkit-		12.1
11.1 -o-
radial-gradient10.026.0
10.0 -webkit-		16.0
3.6 -moz-		6.1
5.1 -webkit-		12.1
11.6 -o-
repeating-linear-gradient10.026.0
10.0 -webkit-		16.0
3.6 -moz-		6.1
5.1 -webkit-		12.1
11.1 -o-
repeating-radial-gradient10.026.0
10.0 -webkit-		16.0
3.6 -moz-		6.1
5.1 -webkit-		12.1
11.6 -o-

 

CSS3 线性渐变

为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

线性渐变的实例：

线性渐变

语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变 - 从上到下（默认情况下）

下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

实例

从上到下的线性渐变：

#grad {
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 标准的语法 */
}


尝试一下 »

线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：

实例

从左到右的线性渐变：

#grad {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}


尝试一下 »

线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：

实例

从左上角到右下角的线性渐变：

#grad {
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}


尝试一下 »

使用角度

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

语法

background: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

 

 

但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

下面的实例演示了如何在线性渐变上使用角度：

实例

带有指定的角度的线性渐变：

#grad {
  background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(180deg, red, blue); /* 标准的语法 */
}


尝试一下 »

使用多个颜色结点

下面的实例演示了如何设置多个颜色结点：

实例

带有多个颜色结点的从上到下的线性渐变：

#grad {
  background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, green, blue); /* 标准的语法 */
}


尝试一下 »

下面的实例演示了如何创建一个带有彩虹颜色和文本的线性渐变：

实例

#grad {
  /* Safari 5.1 - 6.0 */
  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 /* Opera 11.1 - 12.0 */
  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* Firefox 3.6 - 15 */
  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 /* 标准的语法 */
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}


尝试一下 »

使用透明度（Transparency）

CSS3 渐变也支持透明度（transparency），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：

实例

从左到右的线性渐变，带有透明度：

#grad {
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
}


尝试一下 »

重复的线性渐变

repeating-linear-gradient() 函数用于重复线性渐变：

实例

一个重复的线性渐变：

#grad {
  /* Safari 5.1 - 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Opera 11.1 - 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Firefox 3.6 - 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* 标准的语法 */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}


尝试一下 »

CSS3 径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

径向渐变的实例：

Radial gradient

语法

background: radial-gradient(center, shape size, start-color, ..., last-color);

径向渐变 - 颜色结点均匀分布（默认情况下）

实例

颜色结点均匀分布的径向渐变：

#grad {
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
  background: radial-gradient(red, green, blue); /* 标准的语法 */
}


尝试一下 »

径向渐变 - 颜色结点不均匀分布

实例

颜色结点不均匀分布的径向渐变：

#grad {
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
  background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}


尝试一下 »

设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

实例

形状为圆形的径向渐变：

#grad {
  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
  background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}


尝试一下 »

不同尺寸大小关键字的使用

size 参数定义了渐变的大小。它可以是以下四个值：

  • closest-side

  • farthest-side

  • closest-corner

  • farthest-corner

实例

带有不同尺寸大小关键字的径向渐变：

#grad1 {
  /* Safari 5.1 - 6.0 */
  background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* Opera 11.6 - 12.0 */
 background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
 /* Firefox 3.6 - 15 */
  background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* 标准的语法 */
 background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}

#grad2 {
 /* Safari 5.1 - 6.0 */
  background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
 /* Opera 11.6 - 12.0 */
  background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* Firefox 3.6 - 15 */
 background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
 /* 标准的语法 */
  background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
}


尝试一下 »

重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变：

实例

一个重复的径向渐变：

#grad {
  /* Safari 5.1 - 6.0 */
  background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* Opera 11.6 - 12.0 */
  background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* Firefox 3.6 - 15 */
  background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* 标准的语法 */
  background: repeating-radial-gradient(red, yellow 10%, green 15%);
}


尝试一下 »

以上便是本节CSS3渐变的全部内容，通过学习，希望您能够多进行实战练习，灵活掌握渐变，能够让您的样式更加美观！

 

 

BriskNo1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS边框长度控制（收藏）
lin123_00的博客
05-19 2473
CSS边框长度控制 以前需要边框长度比容器小一些时，我用div嵌套。后来发现伪类在实现这个效果时很方便，只需要一个div就够了，另外调整padding和margin都不会很麻烦。 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） 更多相关视频： 0基础前端利用『HTML+CSS』制作你喜欢的暗黑破坏神网页开发：BV1C54y1X7ro 前端发展简史，功能以及未来趋势！（你值得观看）：BV1w5411s7e4 给想学编程又无从下手的小白一些建议：BV1Zf
CSS基础总结-3
m0_49935332的博客
11-11 63
CSS_3 1.关于布局的属性设置 float：html元素是否及如何浮动【none没有 | left{左浮动} | right{右浮动} 】 块级元素:其元素的前后会自动折行 行内元素:按照由左向右一次排列，除非使用元素强制换行。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>设置元素浮动</title> <style> span
初学前端-CSS
weixin_61392399的博客
10-14 1114
前端三剑客中的CSS初学总结快来看看
关于width与padding
热门推荐
Afar的专栏
04-29 1万+
首先谈谈!important问题的引起（盒模型问题）:      在CSS标准中，一个盒模型包括4个区，分别是：内容、内边距（padding）、边框（border）和外边距（margin）。而Width宽度的计算，CSS有它的标准。但是实际上，不同的浏览器的表现却不同。比如，    Firefox（FF）是准确按照CSS标准：width为内容的宽度，也就是说：    层的宽度 = wid
CSS 填充padding与元素宽高width、height
2301_76440312的博客
02-10 262
内边距详细与简写and宽高width、height
width和padding踩的坑~为什么div设置padding被挤出去了
weixin_43228393的博客
04-03 1627
简言之,width设置100%之后,设置padding会将盒子的宽度撑破,超出100% 所以需要设置padding的盒子不能同时设置width=100%
CSS3基础总结一(盒子之前所有内容)
aclts的博客
12-04 159
CSS基础 CSS基本语法结构 h1 { font-size:12px; } h1–>为选择器 其中font-size–>为属性 12px–>为值 在HTML中引入CSS样式 1.内部样式表 内部样式表(内嵌样式表)是写到html页面内部。是将所有的CSS代码抽取出来，单独放到一个标签中。 语法如下 <style> div{ color:red; font-size:12px; } </style> 2.行内
css3基础语法总结大全
06-19
以下是对CSS3基础语法的一些关键知识点的详细总结： 1. **选择器增强**： - **伪类和伪元素**：CSS3增加了许多新的伪类，如`:hover`, `:active`, `:focus`，以及`:nth-child()`, `:nth-last-child()`, `:first-...
css,基础知识小总结
07-06
元素的显示模式：“块元素, 行内元素,行内块元素,元素显示模式的转换" ,边框、外边距、内边距、实际内容,浮动，网页布局总结，清除浮动，CSS样式表：“行内样式表，内部样式表，外部样式表,这些基础前端内容。...
3.1CSS 内容总结(一)基础.md
02-16
CSS基础选择器 - **CSS选择器的作用**：用于指定哪些HTML标签将被CSS规则所应用。 - **选择器分类**： - **标签选择器**：直接使用HTML标签名称作为选择器，能快速为页面中相同类型的标签统一设置样式，但无法...
总结CSS基础属性（一）
07-30
CSS基础属性总结 CSS（层叠样式表）是一种用于描述页面样式的语言，它使得 HTML 结构与样式分离，提高网站的开发效率和维护性。下面是 CSS 基础属性的总结。 一、CSS 的定义和作用 CSS 全称为层叠样式表，它是一...
CSS样式的基础学习总结
09-25
【CSS样式的基础学习总结】 CSS，全称Cascading Style Sheets，中文译为级联样式表，是一种用于描述HTML或XML文档（包括如SVG、MathML等各种XML方言）外观和格式的语言。它允许我们将样式信息与结构化内容分离，...
css和jsp运用,边框的属性
xiaosaq的专栏
10-18 2649
 边框属性 padding-bottompadding-leftpadding-toppadding-right功能：毎个容器都有边框，这些属性设置边框与框內元素间的距离。数值：长度 - 设置相对或绝对值。在数字后指定度量单位如下：mm, cm, in, pt, px, pc, ex, em。em 和 ex 设置产生相对于父字体的字体尺寸。百分比 - 以父元素的百分比设置边框。说明：填充值
html边框显示长短调整,CSS之border边框长度控制
c23856的博客
03-02 1800
需要边框长度比容器小一些时，用div嵌套，但伪类在实现这个效果时很方便，只需要一个div就够了，另外调整padding和。
CSS3 边框
L的博客
12-03 256
CSS3 边框新增的属性 一.border-radius 创建圆角,圆角弧度最多可指定四个参数 语法: border-radius: 10px; /*所有角*/ border-radius: 10px 20px; /*左上角和右下角 右上角和左下角*/ border-radius: 10px 20px 10px; /*左上角 右上角和左下角 右下角*/...
CSS学习之width属性 height属性和Padding（内边距）
WarmAir2006的专栏
12-09 1754
CSS学习之width、height和padding属性
（踩的坑）CSS盒子模型 - 元素的总宽度、高度包括padding、border、margin。最终用box-sizing:border-box解决
kqZhu的博客
07-27 6784
其实在CSS中，最终 元素的总宽度计算公式是这样的： 总元素的宽度=width+左&右填充padding+左&右边框border+左&右边距margin 最终 元素的总高度最终计算公式类似上述： 总元素的高度=height+顶部&底部填充+上&下边框+上&下边距 解决方法： 可以使用 box-sizing：border-box改...
CSS样式----盒子模型（图文详解）
07-29 1089
盒子模型 盒子中的区域 一个盒子中主要的属性就5个：width、height、padding、border、margin。如下： width：内容的宽度。CSS中 width 指的是内容的宽度，而不是盒子的宽度。height：内容的高度。CSS中 height 指的是内容的高度，而不是盒子的高度。padding：内边距。border：边框。margin：外边距。 盒子模型的示意图：
方案-基于云架构的校园信息化建设方案.pdf
最新发布
07-29
方案-基于云架构的校园信息化建设方案.pdf
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值