CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)

简介: CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)

CSS3是用于为HTML文档添加样式和布局的最新版本的层叠样式表(Cascading Style Sheets)。下面是一些常用的CSS3属性及其详细解释:

  1. border-radius:设置元素的边框圆角的半径。可以使用四个值设置四个不同的圆角半径,也可以只使用一个值来设置统一的圆角。
  2. box-shadow:创建一个元素的阴影效果。可以设置水平偏移量、垂直偏移量、模糊程度以及颜色值,以实现不同的阴影效果。
  3. text-shadow:为文本添加阴影效果。可以设置水平偏移量、垂直偏移量、模糊程度以及颜色值来调整阴影的外观。
  4. transition:用于在给定的时间段内平滑地过渡一个或多个CSS属性的值。可以设置过渡的属性、持续时间、延迟时间和过渡的速度曲线函数。
  5. transform:用于对元素进行旋转、缩放、倾斜或平移变换。可以通过设置不同的转换函数来实现各种效果。
  6. opacity:设置元素的透明度。取值范围为0到1,0表示完全透明,1表示完全不透明。
  7. background-size:控制背景图片的尺寸。可以设置具体的宽度和高度值,也可以使用关键词(如"cover"或"contain")来调整图片的显示方式。
  8. @media:用于根据设备的特性和媒体查询条件来应用不同的样式。可以根据屏幕宽度、设备类型等条件来设置样式规则。
  9. flexbox:一种用于创建灵活的布局的CSS3模块。通过设置容器的display属性为"flex",子元素可以轻松地自动调整大小和位置。
  10. @keyframes:用于创建一个动画序列的关键帧。通过指定不同的关键帧和相应的样式规则,可以实现元素的逐帧动画效果。

以上仅是CSS3的一些常用属性,还有许多其他属性可以用于实现更丰富的样式效果和动画效果。需要根据具体的需求和使用场景选择合适的属性来应用样式。

文本

text-shadow:设置文本的阴影

格式举例:

text-shadow: 20px 27px 22px pink;

参数解释:水平位移 垂直位移 模糊程度 阴影颜色。

效果举例:

举例:凹凸文字效果

text-shadow 可以设置多个阴影,每个阴影之间使用逗号隔开。我们来看个例子。

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background-color: #666;
        }
        div {
            font-size: 100px;
            text-align: center;
            font-weight: bold;
            font-family: "Microsoft Yahei";
            color: #666;
        }
        /* text-shadow 可以设置多个阴影,每个阴影之间使用逗号隔开*/
        .tu {
            text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
        }
        .ao {
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }
    </style>
</head>
<body>
<div class="ao">生命壹号</div>
<div class="tu">生命壹号</div>
</body>
</html>

效果如下:

上图中,实现凹凸文字效果的方式比较简单,给左上角放黑色的阴影,右下角放白色的阴影,就达到了凹下去的效果。

盒模型中的 box-ssize 属性

在盒模型中,box-sizing属性用于控制元素的盒模型计算方式。而不存在box-ssize属性。

可用的值有两种:content-boxborder-box

  • content-box是默认值,表示元素的宽度和高度仅包括内容区域的尺寸,不包括边框、内边距和外边距。
  • border-box表示元素的宽度和高度包括内容区域、内边距、边框的尺寸,但不包括外边距。

示例代码:

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  margin: 20px;
  box-sizing: content-box;
}
.border-box {
  box-sizing: border-box;
}

以上例子中,.box元素使用了content-box,其实际宽度为(200 + 2 * 10 + 2 * 1)px,高度为(100 + 2 * 10 + 2 * 1)px。

.border-box元素使用了border-box,其实际宽度和高度为200px和100px,包括了边框和内边距在内。

这样设置盒模型计算方式,可以更好地控制元素的尺寸和布局。

模型中的 box-sizing 属性

我们在之前的文章中专门讲过盒模型。

盒模型是CSS布局的基石,它规定了网页元素如何显示以及元素间相互关系。CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含:
1. 内容区(Content):这是元素的实际内容,如文本、图像等。
2. 填充区(Padding):填充是内容周围的空间,它位于内容和边框之间。
3. 边框(Border):边框是包围在内容和填充外部的线,它是可见的。
4. 外边距(Margin):外边距是元素外部的空间,它在边框和其他元素之间。
盒模型分为标准盒模型和怪异盒模型。在标准盒模型中,设置宽高之后,再设置border和padding。这个盒子的整体的宽高就是开始设置的宽高+padding+border,所以刚开始设置的宽高就是内容显示的宽高。而在怪异盒模型中,设置了宽高之后,不管有没有再设置border和padding,这个盒子都是前面设置的宽高。

CSS3 对盒模型做出了新的定义,即允许开发人员指定盒子宽度和高度的计算方式。

这就需要用到 box-sizing 属性。它的属性值可以是 content-boxborder-box。解释如下:

  • content-box 是 CSS 的默认方式,此时设置的 widthheight 是内容区域的宽高。此时改变 paddingborder 的大小,也不会改变内容的宽高,而是盒子的总宽高发生变化。盒子的实际宽度 = 设置的 width + padding + border
  • border-box 表示内减模式,此时设置的 widthheight 是盒子的总宽高。此时改变 paddingborder 的大小,会改变内容的宽高,盒子的总宽高不变。盒子的实际宽度 = 设置的 width

需要注意的是,为了处理兼容性问题,我们可以在使用时加上私有前缀,如 -webkit-box-sizing-moz-box-sizing 等。

示例代码:

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  margin: 20px;
  box-sizing: content-box;
}
.border-box {
  box-sizing: border-box;
}

以上例子中,.box 元素使用了 content-box,其实际宽度为(200 + 2 * 10 + 2 * 1)px,高度为(100 + 2 * 10 + 2 * 1)px。

.border-box 元素使用了 border-box,其实际宽度和高度为200px和100px,包括了边框和内边距在内。

这样设置盒模型计算方式,可以更好地控制元素的尺寸和布局。

处理兼容性问题:私有前缀

通过网址 http://caniuse.com/ 可以查询 CSS3 各特性的支持程度。

处理兼容性问题的常见方法是为属性添加私有前缀。但应尽量避免使用这种方法,无需刻意去处理 CSS3 的兼容性问题。

私有前缀的举例:

比如说,我想给指定的 div 设置下面这样一个属性:

background: linear-gradient(left, green, yellow);

上面这个属性的作用是添加从左到右的线性渐变,颜色从绿色变为黄色。如果直接这样写属性,是看不到效果的:

此时,我们可以为浏览器添加不同的私有前缀,属性就可以生效了。格式如下:

-webkit-: 谷歌、苹果
-moz-: 火狐
-ms-:IE
-o-:欧朋

格式举例如下:

background: -webkit-linear-gradient(left, green, yellow);
background: -moz-linear-gradient(left, green, yellow);
background: -ms-linear-gradient(left, green, yellow);
background: -o-linear-gradient(left, green, yellow);
background: linear-gradient(left, green, yellow);

效果如下:

边框

边框的属性很多,其中边框圆角和边框阴影这两个属性,应用十分广泛,兼容性也相对较好,且符合渐进增强的原则,需要重点熟悉。

边框圆角:属性border-radius

边框的每个圆角,本质上是一个圆,圆有水平半径和垂直半径:如果二者相等,就是圆;如果二者不等, 就是椭圆。

单个属性的写法:

border-top-left-radius: 60px 120px;        /* 参数解释:水平半径   垂直半径 */
border-top-right-radius: 60px 120px;
border-bottom-left-radius: 60px 120px;
border-bottom-right-radius: 60px 120px;

复合写法:

border-radius: 60px/120px;             /* 参数:水平半径/垂直半径 */
border-radius: 20px 60px 100px 140px;  /* 从左上开始,顺时针赋值。如果当前角没有值,取对角的值 */
border-radius: 20px 60px;

最简洁的写法:(四个角的半径都相同时)

border-radius: 60px;

举例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .parent {
            width: 400px;
        }
        .box {
            width: 100px;
            height: 100px;
            float: left;
            border: 1px solid rgb(144, 12, 63);
            margin: 20px;
            text-align: center;
            line-height: 100px;
            color: #fff;
            font-size: 50px;
            background-color: rgb(255, 141, 26);
        }
        /*画圆形的方式一*/
        .box:nth-child(1) {
            border-radius: 50px;
        }
        /*画圆形的方式二*/
        .box:nth-child(2) {
            border-radius: 50%;
        }
        .box:nth-child(3) {
            border-radius: 100px 0 0 0;
        }
        .box:nth-child(4) {
            border-radius: 100px/50px;
        }
        .box:nth-child(5) {
            border-radius: 10%;
        }
        .box:nth-child(6) {
            border-radius: 0 100px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
</div>
</body>
</html>

效果如下:

边框阴影:属性box-shadow

格式举例:

box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色;

参数解释:

  • 水平偏移:正值向右,负值向左。
  • 垂直偏移:正值向下,负值向上。
  • 模糊程度:不能为负值。

效果如下:

另外,后面还可以再加一个inset属性,表示内阴影。如果不写,则默认表示外阴影。例如:

box-shadow: 3px 3px 3px 3px #666 inset;

效果如下:

注意:设置边框阴影不会改变盒子的大小,即不会影响其兄弟元素的布局。

我们还可以设置多重边框阴影,实现更好的效果,增强立体感。

边框图片

边框图片有以下属性:

  • 边框图片的路径:border-image-source: url("images/border.png");
  • 图片边框的裁剪:border-image-slice: 27;
  • 图片边框的宽度:border-image-width: 27px;
  • 边框图片的平铺:
  • repeat: 正常平铺,但可能会显示不完整
  • round: 平铺,但保证图片完整
  • stretch: 拉伸显示
  • border-image-repeat: stretch;

我们也可以写成一个综合属性:

border-image: url("images/border.png") 27/20px round;

这个属性要好好理解,我们假设拿下面这张图来作为边框图片:

这张图片将会被"切割"成九宫格形式,然后进行平铺。四个角位置、形状保持不变,中心位置和水平垂直向两个方向平铺。

再具体一点:

目录
相关文章
|
5月前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
5月前
|
前端开发 容器
给 CSS 盒子模型添加边框时,需要注意什么?
在给CSS盒子模型添加边框时,需要注意边框的宽度、样式和颜色,以及它如何影响盒子的总尺寸和布局。边框会增加盒子的总宽度和高度,可能需要调整其他属性以保持布局的完整性。
|
3月前
|
Web App开发 前端开发
【CSS】——基础入门常见操作
CSS引入,CSS对元素美化,style修饰,选择器(标签选择器,类选择器,ID选择器,复合选择器),font-size , boder ,width,height,margin,paddiing
|
4月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
71 6
|
4月前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
75 2
|
4月前
|
前端开发
CSS transition过渡属性详解
本文介绍了CSS中`transition`属性的作用、用法及实例。`transition`用于在元素属性变化时添加平滑过渡动画,通过设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`等属性值,可以精细控制过渡效果。文末提供了HTML示例代码,展示了如何使用`transition`实现鼠标悬停时背景颜色的平滑变化。
153 1
|
4月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
86 4
|
4月前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
76 1
|
5月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
498 1
|
4月前
CSS3圆角边框
CSS3圆角边框
54 0

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    详解智能编码在前端研发的创新应用
  • 4
    智能编码在前端研发的创新应用
  • 5
    VSCode AI提效工具,通义灵码前端开发体验
  • 6
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
  • 9
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
  • 10
    无前端经验如何快速搭建游戏站:使用 windsurf 从零到上线的详细指南