当前位置： 首页 > news >正文

前端知识-CSS3

news 来源：原创 2025/6/22 18:46:59

文章目录

  • CSS3 边框
    • CSS3 圆角
    • CSS3 圆角属性
    • CSS3 盒阴影
    • CSS3 边界图片
  • CSS3 背景
    • CSS3 background-image属性
    • CSS3 background-size 属性
    • CSS3 的 background-origin 属性
    • CSS3 background-clip属性
  • CSS3 渐变（Gradients）
  • CSS3 文本效果
    • text-shadow
    • box-shadow
    • text-overflow
    • CSS3的换行
      • word-wrap
      • word-break
  • CSS3 2D 转换
  • CSS3 3D 转换
  • CSS3 过渡
  • CSS3 动画
  • CSS3 多列
  • CSS3 用户界面
    • CSS3 调整尺寸(Resizing)
  • CSS 图片
    • 响应式图片
  • CSS3 弹性盒子(Flex Box)
    • flex-direction
    • justify-content 属性
      • flex-start：
      • flex-end：
      • center：
      • space-between：
      • space-around：
    • align-items 属性
    • flex-wrap 属性
    • align-content 属性
    • align-self
  • CSS 网格布局
    • display 属性
    • 网格轨道

CSS3 边框

CSS3 圆角

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

要在四个角上一一指定，可以使用以下规则：

  • 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
  • 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
  • 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
  • 一个值： 四个圆角值相同

在 CSS3 中 border-radius 属性被用于创建圆角：
实例
在div中添加圆角元素：

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

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <title>圆角练习</title>
            <style>
                  #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: 50%;
                        background: #8AC007;
                        padding: 20px;
                        width: 200px;
                        height: 150px;
                  }

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



            </style>
      </head>
      <body>
            <p>四个值 - border-radius:15px 50px 30px 5px:</p>
            <p id="rcorners4"></p>

            <p>三个值 - border-radius: 15px 50px 30px:</p>
            <p id="rcorners5"></p>

            <p>两个值 - border-radius: 15px 50px</p>
            <p id="rcorners6"></p>

            <p>椭圆边框 - border-radius: 50%</p>
            <p id="rcorners7"></p>

            <p>椭圆边框 - border-radius: 15px/50px</p>
            <p id="rcorners8"></p>

      </body>
</html>

CSS3 圆角属性

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

CSS3 盒阴影

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

实例
在div中添加box-shadow属性

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

CSS3 边界图片

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

实例
在 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 */
}

CSS3 背景

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

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

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区域内可以放置背景图像。

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

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

CSS3 渐变（Gradients）

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

  • 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
  • 径向渐变（Radial Gradients）- 由它们的中心定义

语法：

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

示例：

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <title>渐变</title>
            <style>
                  #grad1 {
                        height: 200px;
                        background-color: red;
                        background-image: linear-gradient(#e66465,#9198e5);
                  }

                  #grad2 {
                        height: 200px;
                        background-color: red;
                        background-image: linear-gradient(to right,red,yellow);
                  }

                  #grad3 {
                        height: 200px;
                        background-color: red;
                        background-image: linear-gradient(to bottom right,red,yellow);
                  }

                  #grad4 {
                        height: 200px;
                        background-color: red;
                        background-image: linear-gradient(0deg,red,yellow);
                  }

                  #grad5 {
                        height: 200px;
                        background-color: red;
                        background-image: linear-gradient(90deg,red,yellow);
                  }

                  #grad6 {
                        height: 200px;
                        background-color: red;
                        background-image: linear-gradient(180deg,red,yellow);
                  }

                  #grad7 {
                        height: 200px;
                        background-color: red;
                        background-image: linear-gradient(-90deg,red,yellow);
                  }

                  #grad8 {
                        height: 200px;
                        background-color: red;
                        background-image: linear-gradient(red,green,blue);
                  }

                  #grad9 {
                        height: 200px;
                        background-color: red;
                        background-image: linear-gradient(red,orange,yellow,green,blue,indigo,violet);
                  }

                  #grad10 {
                        height: 200px;
                        background-color: red;
                        background-image: linear-gradient(red 10%,green 85%, blue 90%);
                  }

                  #grad11 {
                        height: 200px;
                        background-image: linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));
                  }

                  #grad12 {
                        height: 200px;
                        background-color: red;
                        background-image: repeating-linear-gradient(red,yellow 10%, green 20%);
                  }

                  #grad13 {
                        height: 200px;
                        background-color: red;
                        background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);
                  }

                  #grad14 {
                        height: 150px;
                        width: 200px;
                        background-color: red;
                        background-image: radial-gradient(red,green,blue);
                  }

                  #grad15 {
                        height: 150px;
                        width: 200px;
                        background-color: red;
                        background-image: radial-gradient(red 5%, yellow 15%, green 60%);
                  }

                  #grad16 {
                        height: 150px;
                        width: 200px;
                        background-color: red;
                        background-image: radial-gradient(circle,red,yellow,green);
                  }

                  #grad17 {
                        height: 150px;
                        width: 150px;
                        background-color: red;
                        background-image: radial-gradient(closest-side at 60% 55%,red,yellow,black);
                  }

                  #grad18 {
                        height: 150px;
                        width: 150px;
                        background-color: red;
                        background-image: radial-gradient(farthest-side at 60% 55%,red,yellow,black);
                  }

                  #grad19 {
                        height: 150px;
                        width: 150px;
                        background-color: red;
                        background-image: radial-gradient(closest-corner at 60% 55%,red,yellow,black);
                  }

                  #grad20 {
                        height: 150px;
                        width: 150px;
                        background-color: red;
                        background-image: radial-gradient(farthest-corner at 60% 55%,red,yellow,black);
                  }

                  #grad21 {
                        height: 150px;
                        /* background-color: red; */
                        background-image: repeating-radial-gradient(red,yellow 10%,green 15%);
                  }



            
            </style>
      </head>
      <body>
            <h3>线性渐变 - 从上到下</h3>
            <p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
            <div id="grad1"></div>


            <h3>线性渐变 - 从左到右</h3>
            <p>从顶部开始的线性渐变。起点是红色，慢慢过渡到黄色：</p>
            <div id="grad2"></div>

            <h3>线性渐变 - 左上角到右下角</h3>
            <p>从左上角开始的线性渐变。起点是红色，慢慢过渡到黄色：</p>
            <div id="grad3"></div>

            <h3>线性渐变 - 使用不同的角度</h3>
            <div id="grad4" style="text-align: center;">0deg</div>
            <hr/>
            <div id="grad5" style="text-align: center;">90deg</div>
            <hr/>
            <div id="grad6" style="text-align: center;">180deg</div>
            <hr/>
            <div id="grad7" style="text-align: center;">-90deg</div>
            <br/><br/>

            <h3>多个颜色</h3>
            <p id="grad8"></p>
            <hr/>
            <p id="grad9"></p>
            <hr/>
            <p id="grad10"></p>

            <h3>线性渐变 - 透明度</h3>
            <p>为了添加透明度，我们使用raba()函数来定义颜色结点。rgba()函数中的最后一个参数可以是从0到1的值，它定义了颜色的透明度：0 表示完全透明，1表示完全不透明</p>
            <p id="grad11"></p>

            <h3>重复的线性渐变</h3>
            <div id="grad12"></div>
            <p>90deg:</p>
            <div id="grad13"></div>

            <h3>径向渐变 - 颜色结点均匀分布</h3>
            <div id="grad14"></div>
            <p>颜色不均匀分布</p>
            <div id="grad15"></div>
            <p>设置形状</p>
            <div id="grad16"></div>
            <p>不同尺寸大小关键字的使用</p>
            <p><strong>closest-side:</strong></p>
            <div id="grad17"></div>
            <p><strong>farthest-side:</strong></p>
            <div id="grad18"></div>
            <p><strong>closest-corner:</strong></p>
            <div id="grad19"></div>
            <p><strong>farthest-corner(默认):</strong></p>
            <div id="grad20"></div>
            <p><strong>重复的径向渐变</strong></p>
            <div id="grad21"></div>
      </body>
</html>

CSS3 文本效果

text-shadow

CSS3 中，text-shadow属性适用于文本阴影。

h1
{
    text-shadow: 5px 5px 5px #FF0000;
}

box-shadow

CSS3 中 CSS3 box-shadow 属性适用于盒子阴影

实例

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

text-overflow

CSS3 Text Overflow属性
CSS3文本溢出属性指定应向用户如何显示溢出内容

实例

p.test1 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip; 
}
 
p.test2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis; 
}

CSS3的换行

word-wrap

如果某个单词太长，不适合在一个区域内，它扩展到外面：
CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：
CSS代码如下：
实例
允许长文本换行:

p {word-wrap:break-word;}

word-break

CSS3 单词拆分换行
CSS3 单词拆分换行属性指定换行规则：
CSS代码如下：
实例

p.test1 {
    word-break: keep-all;
}
 
p.test2 {
    word-break: break-all;
}

CSS3 2D 转换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

2D 转换方法

函数描述
matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。
translate(x,y)定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)定义 2D 转换，沿着 X 轴移动元素。
translateY(n)定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)定义 2D 缩放转换，改变元素的宽度。
scaleY(n)定义 2D 缩放转换，改变元素的高度。
rotate(angle)定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)定义 2D 倾斜转换，沿着 Y 轴。
<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8"></meta>
            <title>2D转换</title>
            <style>
                  div {
                        width: 100px;
                        height: 75px;
                        background-color: red;
                        border: 1px solid black;
                  }

                  .notFirst {
                        margin-top: 200px;
                  }

                  div#div2 {
                        transform: translate(50px,100px);
                        -ms-transform: translate(50px,100px); /*IE9 */
                        -webkit-transform: translate(50px,100px); /*Safari and Chrome*/
                  }

                  div#div3 {
                        transform: rotate(30deg);
                        -ms-transform: rotate(30deg);
                        -webkit-transform: rotate(30deg);
                  }

                  div#div4 {
                        background-color: yellow;
                        transform: scale(2,3);
                        -ms-transform: scale(2,3);
                        -webkit-transform: scale(2,3);
                  }

                  div#div5 {
                        transform: skew(30deg,20deg);
                        -ms-transform: skew(30deg,20deg);
                        -webkit-transform: skew(30deg,20deg);
                  }

                  div#div6 {
                        transform: matrix(0.866,0.5,-0.5,0.866,0,0);
                        -ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
                        -webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
                  }
            </style>
      </head>
      <body>
           <p>translate()方法：根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。</p> 
           <div>Hello.This is a DIV element.</div>
           <div id="div2">Hello.This is a DIV element</div>
           
           <p class="notFirst">rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。</p>
           <div>你好。这是一个DIV元素。</div>
           <div id="div3">你好。这是一个DIV元素。</div>

           <p class="notFirst">scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数</p>
           <div>
            原始div
           </div>
           <div id="div4">
            div元素的宽度是原始大小的两倍，高度是原始大小的三倍
           </div>
           
           <p class="notFirst">skew()方法，该元素倾斜，取决于X轴和Y轴的角度。</p>
           <div>Hello.This is a DIV element.</div>
           <div id="div5">Hello.This is a DIV element</div>

           <p class="notFirst">matrix() 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。</p>
           <div>Hello.This is a DIV element.</div>
           <div id="div6">Hello.This is a DIV element.</div>
      </body>
</html>

CSS3 3D 转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

3D 转换方法

函数描述
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)定义 3D 转化。
translateX(x)定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿 X 轴的 3D 旋转。
rotateY(angle)定义沿 Y 轴的 3D 旋转。
rotateZ(angle)定义沿 Z 轴的 3D 旋转。
perspective(n)定义 3D 转换元素的透视视图。

CSS3 过渡

过渡属性
下表列出了所有的过渡属性:

属性描述CSS
transition简写属性，用于在一个属性中设置四个过渡属性。3
transition-property规定应用过渡的 CSS 属性的名称。3
transition-duration定义过渡效果花费的时间。默认是 0。3
transition-timing-function规定过渡效果的时间曲线。默认是 “ease”。3
transition-delay规定过渡效果何时开始。默认是 0。3
<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <title>CSS3 过渡</title>
            <style>
                  div {
                        width: 100px;
                        height: 100px;
                        background: red;
                        transition: width 2s,height 2s,transform 2s;
                        -webkit-transition: width 2s,height 2s,-webkit-transform 2s;
                  }

                  div:hover {
                        width: 200px;
                        height: 200px;
                        transform: rotate(180deg);
                        -webkit-transform: rotate(180deg);
                  }
            </style>
      </head>
      <body>
            <div>鼠标移动到div元素上，查看过渡效果。</div>
      </body>
</html>

CSS3 动画

CSS3的动画属性
下面的表格列出了 @keyframes 规则和所有动画属性：

属性描述CSS
@keyframes规定动画。3
animation所有动画属性的简写属性。3
animation-name规定 @keyframes 动画的名称。3
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3
animation-timing-function规定动画的速度曲线。默认是 “ease”。3
animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。3
animation-delay规定动画何时开始。默认是 0。3
animation-iteration-count规定动画被播放的次数。默认是 1。3
animation-direction规定动画是否在下一周期逆向地播放。默认是 “normal”。3
animation-play-state规定动画是否正在运行或暂停。默认是 “running”。3
<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <title>CSS3 动画</title>
            <style>
                  div {
                        width: 100px;
                        height: 100px;
                        background: red;
                        position: relative;
                        animation:myfirst 5s linear 2s infinite alternate;
                        /* Firefox: */
                        -moz-animation: myfirst 5s linear 2s infinite alternate;
                        /* Safari and Chrome: */
                        -webkit-animation: myfirst 5s linear 2s infinite alternate;
                        /* Opera: */
                        -o-animation: myfirst 5s linear 2s infinite alternate;
                  }

                  @keyframes myfirst {
                        0%   {background: red; left: 0px; top: 0px;}
                        25%  {background: yellow; left: 200px; top: 0px;}
                        50%  {background: blue; left: 200px; top: 200px;}
                        75%  {background: green; left: 0px; top: 200px;}
                       100% {background: red; left: 0px; top:0px;}
                  }

                  @-moz-keyframes myfirst {
                        0%   {background: red; left: 0px; top: 0px;}
                        25%  {background: yellow; left: 200px; top: 0px;}
                        50%  {background: blue; left: 200px; top: 200px;}
                        75%  {background: green; left: 0px; top: 200px;}
                       100% {background: red; left: 0px; top:0px;}
                  }

                  @-webkit-keyframes myfirst {
                        0%   {background: red; left: 0px; top: 0px;}
                        25%  {background: yellow; left: 200px; top: 0px;}
                        50%  {background: blue; left: 200px; top: 200px;}
                        75%  {background: green; left: 0px; top: 200px;}
                        100% {background: red; left: 0px; top:0px;}
                  }

                  @-o-keyframes myfirst {
                        0%   {background: red; left: 0px; top: 0px;}
                        25%  {background: yellow; left: 200px; top: 0px;}
                        50%  {background: blue; left: 200px; top: 200px;}
                        75%  {background: green; left: 0px; top: 200px;}
                        100% {background: red; left: 0px; top:0px;}
                  }
            </style>
      </head>
      <body>
            <div></div>
      </body>
</html>

CSS3 多列

CSS3 多列属性
下表列出了所有 CSS3 的多列属性：

属性描述
column-count指定元素应该被分割的列数。
column-fill指定如何填充列
column-gap指定列与列之间的间隙
column-rule所有 column-rule-* 属性的简写
column-rule-color指定两列间边框的颜色
column-rule-style指定两列间边框的样式
column-rule-width指定两列间边框的厚度
column-span指定元素要跨越多少列
column-width指定列的宽度
columnscolumn-width 与 column-count 的简写属性。
<!DOCTYPE html>
<html>

<head>
      <meta charset="utf-8">
      <title>CSS3 多列</title>
      <style>
            .newspaper {
                  column-count: 3;
                  -moz-column-count: 3;
                  /* Firefox */
                  -webkit-column-count: 3;
                  /* Chrome, Safari, Opera */
                  /* 间隙 */
                  column-gap: 40px;
                  -webkit-column-gap: 40px;
                  -moz-column-gap: 40px;
                  /* 列边框 */
                  column-rule-style: solid;
                  -webkit-column-rule-style: solid;
                  -moz-column-rule-style: solid;
                  /* 列边框宽度 */
                  -webkit-column-rule-width: 1px;
                  /* Chrome, Safari, Opera */
                  -moz-column-rule-width: 1px;
                  /* Firefox */
                  column-rule-width: 1px;
                  /* 颜色 */
                  -webkit-column-rule-color: lightblue;
                  /* Chrome, Safari, Opera */
                  -moz-column-rule-color: lightblue;
                  /* Firefox */
                  column-rule-color: lightblue;
                  /*  简写*/
                  /* -webkit-column-rule: 1px solid lightblue;
                  -moz-column-rule: 1px solid lightblue; 
                  column-rule: 1px solid lightblue; */
            }
            h1 {
                  border: 1px solid red;
                  column-span: all;
                  -webkit-column-span: all;
            }
      </style>
</head>

<body>
      <h1>CSS3 多列</h1>
      <div class="newspaper">
            “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
      </div>
</body>

</html>

CSS3 用户界面

CSS3 调整尺寸(Resizing)

CSS3中，resize属性指定一个元素是否应该由用户去调整大小。
这个 div 元素由用户调整大小。 (在 Firefox 4+, Chrome, 和 Safari中)
CSS代码如下：
实例
由用户指定一个div元素尺寸大小：

div {
    resize:both;
    overflow:auto;
}

CSS3 方框大小调整(Box Sizing)
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
实例
规定两个并排的带边框方框：

div
{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    width:50%;
    float:left;
}

CSS3 外形修饰（outline-offset ）
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

轮廓与边框有两点不同：
轮廓不占用空间
轮廓可能是非矩形
这个 div 在边框之外 15 像素处有一个轮廓。
CSS 代码如下:
实例
规定边框边缘之外 15 像素处的轮廓：

div
{
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
}

CSS 图片

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <title>CSS3 图片</title>
            <style>
                  a {
                        display: inline-block;
                        border: 1px solid #ddd;
                        border-radius: 4px;
                        padding: 5px;
                        transition: 0.3s;
                  }

                  a:hover {
                        box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
                  }
            </style>
      </head>
      <body>
            <a target="_blank" href="images/index_button.png">
                  <img src="images/index_button.png" alt="Paris" style="width:304px;height:228px;"></img>
            </a>
      </body>
</html>

响应式图片

响应式图片会自动适配各种尺寸的屏幕。

实例中，你可以通过重置浏览器大小查看效果:
如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：
实例

img {
    max-width: 100%;
    height: auto;
}

响应式相册：

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <title>CSS 响应式相册</title>
            <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
            <style>
                  div.img {
                        border: 1px solid #ccc;
                  }

                  div.img:hover {
                        border: 1px solid #777;
                  }

                  div.img img {
                        width: 100%;
                        height: auto;
                  }

                  div.desc {
                        padding: 15px;
                        text-align: center;
                  }

                  * {
                        box-sizing: border-box;
                  }

                  .responsive {
                        padding: 0 6px;
                        float: left;
                        width: 24.99999%;
                  }

                  @media only screen and (max-width: 700px) {
                        .responsive {
                              width: 49.99999%;
                              margin: 6px 0;
                        }
                  }

                  @media only screen and (max-width: 500px) {
                        .responsive {
                              width: 100%;
                        }
                  }
            </style>
      </head>
      <body>
            <h2 style="text-align: center;">响应式图片相册</h2>
            <div class="responsive">
                  <div class="img">
                        <a target="_blank" href="images/index_button.png">
                              <img src="images/index_button.png" alt="图片1" width="300" height="200">
                        </a>
                        <div class="desc">图片描述</div>
                  </div>
            </div>
            <div class="responsive">
                  <div class="img">
                        <a target="_blank" href="images/index_button.png">
                              <img src="images/index_button.png" alt="图片1" width="300" height="200">
                        </a>
                        <div class="desc">图片描述</div>
                  </div>
            </div>
            <div class="responsive">
                  <div class="img">
                        <a target="_blank" href="images/index_button.png">
                              <img src="images/index_button.png" alt="图片1" width="300" height="200">
                        </a>
                        <div class="desc">图片描述</div>
                  </div>
            </div>
            <div class="responsive">
                  <div class="img">
                        <a target="_blank" href="images/index_button.png">
                              <img src="images/index_button.png" alt="图片1" width="300" height="200">
                        </a>
                        <div class="desc">图片描述</div>
                  </div>
            </div>
      </body>
</html>

CSS3 弹性盒子(Flex Box)

CSS3 弹性盒子属性
下表列出了在弹性盒子中常用到的属性:

属性描述
display指定 HTML 元素盒子类型。
flex-direction指定了弹性容器中子元素的排列方式
justify-content设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap设置弹性盒子的子元素超出父容器时是否换行。
align-content修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flowflex-direction 和 flex-wrap 的简写
order设置弹性盒子的子元素排列顺序。
align-self在弹性子元素上使用。覆盖容器的 align-items 属性。
flex设置弹性盒子的子元素如何分配空间。

flex-direction

flex-direction 属性指定了弹性子元素在父容器中的位置。

语法
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:

  • row：横向从左到右排列（左对齐），默认的排列方式。
  • row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
  • column：纵向排列。
  • column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <title>CSS 弹性盒子</title>
            <style>
                  .flex-container {
                        display: flex;
                        display: -webkit-flex;
                        flex-direction: row-reverse;
                        -webkit-flex-direction: row-reverse;
                        width: 400px;
                        height: 250px;
                        background-color: lightgray;
                  }

                  .flex-item {
                        background-color: cornflowerblue;
                        width: 100px;
                        height: 100px;
                        margin: 10px;
                  }
            </style>
      </head>
      <body>
            <div class="flex-container">
                  <div class="flex-item">flex item 1</div>
                  <div class="flex-item">flex item 2</div>
                  <div class="flex-item">flex item 3</div>
            </div>
      </body>
</html>

justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

justify-content 语法如下：

justify-content: flex-start | flex-end | center | space-between | space-around

各个值解析:

flex-start：

弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

flex-end：

弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

center：

弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

space-between：

弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

space-around：

弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

在这里插入图片描述

align-items 属性

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

语法

align-items: flex-start | flex-end | center | baseline | stretch

各个值解析:

  • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
  • stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

flex-wrap 属性

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

语法
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
各个值解析:

  • nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
  • wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
  • wrap-reverse -反转 wrap 排列。

align-content 属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

语法

align-content: flex-start | flex-end | center | space-between | space-around | stretch

各个值解析:

  • stretch - 默认。各行将会伸展以占用剩余的空间。
  • flex-start - 各行向弹性盒容器的起始位置堆叠。
  • flex-end - 各行向弹性盒容器的结束位置堆叠。
  • center -各行向弹性盒容器的中间位置堆叠。
  • space-between -各行在弹性盒容器中平均分布。
  • space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

align-self

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

语法

align-self: auto | flex-start | flex-end | center | baseline | stretch

各个值解析:

  • auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
  • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
  • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
  • stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

CSS 网格布局

网格是一组相交的水平线和垂直线，它定义了网格的列和行。

CSS 网格属性

属性描述
column-gap指定列之间的间隙
gaprow-gap 和 column-gap 的简写属性
gridgrid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 以及 grid-auto-flow 的简写属性
grid-area指定网格元素的名称，或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性
grid-auto-columns指的默认的列尺寸
grid-auto-flow指定自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。
grid-auto-rows指的默认的行尺寸
grid-columngrid-column-start 和 grid-column-end 的简写属性
grid-column-end指定网格元素列的结束位置
grid-column-gap指定网格元素的间距大小
grid-column-start指定网格元素列的开始位置
grid-gapgrid-row-gap 和 grid-column-gap 的简写属性
grid-rowgrid-row-start 和 grid-row-end 的简写属性
grid-row-end指定网格元素行的结束位置
grid-row-gap指定网格元素的行间距
grid-row-start指定网格元素行的开始位置
grid-templategrid-template-rows, grid-template-columns 和 grid-areas 的简写属性
grid-template-areas指定如何显示行和列，使用命名的网格元素
grid-template-columns指定列的大小，以及网格布局中设置列的数量
grid-template-rows指定网格布局中行的大小
row-gap指定两个行之间的间距

display 属性

当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。

网格轨道

我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的列和行。
这些属性定义了网格的轨道，一个网格轨道就是网格中任意两条线之间的空间。

可以使用以下属性来调整间隙大小：
grid-column-gap
grid-row-gap
grid-gap

相关文章：

  • Java Properties 类详解
  • 基于winform的串口调试助手
  • Nginx负载均衡时如何为指定ip配置固定服务器
  • 25.6 多模态AI类型系统实战：日均10万请求下的99.99%可靠性保障与10倍性能提升
  • 《Java八股文の文艺复兴》第十篇：量子永生架构——对象池的混沌边缘
  • C# 属性（Property）
  • 双向链表示例
  • FreeRTOS任务创建和删除(静态)
  • 蓝桥杯嵌入式比赛的做题步骤总结！
  • Elastic 的 OpenTelemetry 分发版（EDOT）现已正式发布：开源、可用于生产环境的 OTel
  • 【HFP】蓝牙HFP应用层核心技术研究
  • 23种设计模式中的观察者模式
  • 26考研 | 王道 | 数据结构 | 第五章 树
  • mybatis plus 实体类基于视图，更新单表的时候报视图或函数‘v_视图名‘不可更新，因为修改会影响多个基表的错误的简单处理方法。
  • 基于BP神经网络的杂草智能识别系统（杂草识别、Python项目）
  • mac安装浏览器闪退处理
  • 【ARTS】【LeetCode-2873】有序三元组中的最大值!
  • 计算机系统--- BIOS（基本输入输出系统）
  • 内网渗透-MySQL提权
  • Java面试黄金宝典38
  • 网站建设收费情况/上海seo推广服务
  • 五屏网站建设哪家有/做seo有什么好处
  • 政府门户网站建设依据及必要性/青岛seo计费
  • 什么是网站优化/百度网盘下载
  • 上海做网站需要多少钱/seo服务外包报价
  • 适合新手做的网站/石家庄seo关键词