要为不同的 CSS 样式规则设置媒体查询，您可以尝试运行以下代码 - 示例在线演示                    body {             background-color: lightpink;          }          @media screen and (max-width: 420px) {             body {                background-color: lightblue;             }          }                     如果屏幕尺寸小于 420px，则显示浅蓝色，否则显示浅粉色    

响应式网页设计提供最佳体验，易于阅读和导航，在不同设备（如台式机、移动设备和平板电脑）上的调整最小。让我们看看什么是响应式网页设计。

媒体查询用于为不同尺寸的设备（如移动设备、台式机等）设置不同的样式规则。您可以尝试运行以下代码来使用 CSS3 实现媒体查询 - 示例在线演示 body { background-color: lightpink; } @media screen and (max-width: 420px) { body { background-color: lightblue; } } 如果屏幕尺寸小于 420px，则显示浅蓝色，否则显示浅粉色

box-sizing 属性用于更改元素的高度和宽度。自 CSS2 以来，box 属性的工作方式如下所示 -宽度 + 填充 + 边框 = 元素盒子实际可见/渲染宽度高度 + 填充 + 边框 = 元素盒子实际可见/渲染高度示例为了理解 box-sizing 属性，让我们来看一个示例：在线演示                    .div1 {             width: 300px;             height: 100px;             border: 1px solid blue;             box-sizing: border-box;          }          .div2 {             width: 300px;             height: 100px;             padding: 50px;             border: 1px solid red;             box-sizing: border-box;          }                     TutorialsPoint.com       TutorialsPoint.com    

让我们了解 CSS2 大小属性和 CSS3 box-sizing 属性之间的区别。CSS2 大小属性在线演示                    .div1 {             width: 200px;             height: 100px;             border: 1px solid green;           }          .div2 {             width: 200px;             height: 100px;             padding: 50px;             border: 1px solid pink;          }                     TutorialsPoint.com       TutorialsPoint.com     CSS3 box-sizing 属性在线演示                    .div1 {             width: 300px;             height: 100px;             border: 1px solid blue;             box-sizing: border-box;          }          .div2 {             width: 300px;             height: 100px;             padding: 50px;             border: 1px solid red;             box-sizing: border-box;          }                     TutorialsPoint.com       TutorialsPoint.com    

CSS3 resize 属性具有三个常用值，如下所示 -水平垂直两者示例在 CSS3 用户界面中使用 resize 属性中的这两个值：在线演示                    div {             border: 2px solid;             padding: 20px;             width: 300px;             resize: both;             overflow: auto;          }                     我的网站    

border-image-repeat 属性用于使用 CSS 设置边框图像为圆角、重复和拉伸。示例您可以尝试运行以下代码来实现 border-image-repeat 属性：在线演示                    #borderimg1 {             border: 15px solid transparent;             padding: 15px;             border-image-source: url(https://tutorialspoint.com/css/images/border.png);             border-image-repeat: round;             border-image-slice: 40;             border-image-width: 20px;          }                     这是一个图像边框示例。    

border-image-source 属性用于在 CSS 中设置图像路径。您可以尝试运行以下代码来设置图像路径 - 示例在线演示 #borderimg1 { border: 15px solid transparent; padding: 15px; border-image-source: url(https://tutorialspoint.com/css/images/border.png); border-image-repeat: round; } 这是一个图像边框示例。

CSS border-image 属性用于向某些元素添加图像边框。您可以尝试运行以下代码来实现 border-image 属性 -示例在线演示                    #borderimg1 {             border: 15px solid transparent;             padding: 15px;             border-image: url(https://tutorialspoint.com/css/images/border.png) 50 round;          }                     这是一个图像边框示例。    

要使用 CSS 创建 Tada 动画效果，您可以尝试运行以下代码：示例在线演示                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top: 95px;             margin-bottom: 60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes tada {             0% {-webkit-transform: scale(1);}             10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}             30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}             40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}             100% {-webkit-transform: scale(1) rotate(0);}          }          @keyframes tada {             0% {transform: scale(1);}             10%, 20% {transform: scale(0.9) rotate(-3deg);}             30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}             40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}             100% {transform: scale(1) rotate(0);}          }          .tada {             -webkit-animation-name: tada;             animation-name: tada;          }                           刷新页面                function myFunction() {             location.reload();          }