要根据屏幕尺寸更改列宽，请使用媒体查询。当您需要为不同的设备（如平板电脑、手机、台式机等）设置样式时，可以使用媒体查询。首先，设置 div − Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod, maiores! 设置初始宽度 要设置上述 div 的宽度，请在 CSS 中使用 width 属性 − .sample { width: 50%; background-color: lightblue; height: 200px; font-size: 18px; } 更改列宽 现在，要更改…… 阅读更多

要创建线性渐变，请使用 background-image 属性的 linear-gradient() 方法。语法 下面是语法 − background-image: linear-gradient(angle, color-stop1, color-stop2); 颜色停止的位置可以设置为百分比或绝对长度。例如，对于线性渐变。颜色停止是您希望为平滑过渡设置的颜色 − background-image: linear-gradient( rgb(61, 255, 2) 40%, rgb(0, 174, 255) 80%, rgb(255, 29, 29) 20% ); 也可以使用 url() 和 linear-gradient() 在图像上设置渐变 − … 阅读更多

opacity 属性是现代解决方案，适用于 Firefox、Safari、Opera 和所有版本的 Chrome。-moz-opacity 属性是 Firefox 0.9 之前的版本的 opacity 属性，而 –khtml-opacity 属性是 Safari 1 版及更高版本的属性。将所有这些值一起用作现代 opacity 的后备方案，使我们能够在所有浏览器中使用 opacity − .transparent { filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; } 在所有浏览器中都能正常工作的透明度 适用于在所有…… 阅读更多

伪类关键字用于指定添加它的选择器的特殊状态。这使我们能够更好地控制，现在我们可以在选择器处于特定状态（例如：悬停、选中、已访问等）时对其进行定位。伪类 下面是一些关键的伪类 − :active = 选择活动链接 :checked = 选择每个选中的元素 :first-child = 选择元素父级的第一个子元素 :first-of-type = 选择其父级的第一个元素 :focus = 选择具有焦点的元素 :hover = 选择悬停的元素 … 阅读更多

要在 CSS3 中指定断词规则，请使用 word-break 属性。此属性用于换行。让我们看看语法 − word-break: value; 值包括 normal − 默认换行规则。break-all − 只有在发生溢出时，单词才会在任何字符处断开 break-word − 单词会在任意点断开以防止溢出 下面是使用 CSS3 指定断词规则的代码 − 正常的断词规则 正常的断词规则是默认规则 − word-break: normal; 例如 让我们…… 阅读更多

CSS 中的高级选择器包括相邻兄弟选择器、属性选择器、直接子选择器、nth-of-type 选择器等。它还包括通用兄弟选择器，如下面的示例所示：h1 ~ h3 直接子选择器的示例 −div > span 下面是显示 CSS 中高级选择器的代码 − 示例　在线演示 #red {    color: red; } .green {    background: green; } ul:nth-of-type(1) {    background: rgb(0, 174, 255); } ul + h3 {    border: 4px solid rgb(19, 0, 128); } a[href="https://www.wikipedia.org"] {    font-size: 25px; } h1 ~ h3 {    font-size: 40px; } div > span {   … 阅读更多

opacity 属性是最终的现代解决方案，适用于 Firefox 0.9+、Safari 2、Opera 9+、IE 9+ 和所有版本的 Google Chrome。-moz-opacity 属性是 Firefox 0.9 之前的版本的 opacity 属性，而 –khtml-opacity 属性是 Safari 1 版及更高版本的属性。filter 属性用于 IE 5 到 9 浏览器以提供类似不透明度的效果。以下是使用 CSS 为所有浏览器提供图像不透明度的代码 − 示例　在线演示 body{    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } img {    width:270px;    height:200px; } .transparent{   … 阅读更多

text-overflow 属性在 CSS3 中用于确定如何向用户发出未显示的溢出内容的信号。语法 下面是 text-overflow 属性的语法 − text-overflow: value; 值可以是 clip、ellipsis、string 和 initial。您可以使用 string 值设置任何文本。当使用 ellipsis 值时，将显示 ("...") t 用于剪切文本。以下是 CSS3 中处理文本溢出的代码 − 剪切文本 在此示例中，溢出文本被剪切，并且无法使用 text-overflow 属性访问…… 阅读更多

要设置径向渐变的大小，请使用 radial-gradient() 函数。此函数将径向渐变设置为背景图像。函数中的第二个参数设置为所需的大小，如下例所示 − background-image: radial-gradient(40% 50px at center, rgb(30, 255, 0), rgb(0, 195, 255), rgb(128, 0, 32)); 可能的值包括 farthest-corner（默认值）、closest-side、closest-corner 和 farthest-side。以下是使用 CSS 设置径向渐变大小的代码。让我们首先查看径向渐变的完整语法。语法 下面是…… 阅读更多

要创建 CSS3 过渡效果，请使用 transition 属性。以下是使用 CSS3 创建过渡效果的代码 − 示例　在线演示 .container div {    width: 300px;    height: 100px;    background: rgb(25, 0, 255);    border: 2px solid red;    transition: width 2s; } .container:hover div {    width: 100px; } 过渡效果示例 悬停在上面的 div 上以减小其宽度 输出 以上代码将产生以下输出 − 悬停在 div 上 −