【CSS3系列】第三章 · CSS3新增边框和文本属性

写在前面

---

        Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！

        如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！

---

目录

写在前面

1. CSS3新增边框属性

1.1 边框圆角

1.2 边框外轮廓（了解）

 2. CSS3新增文本属性

2.1 文本阴影

2.2 文本换行

2.3 文本溢出

2.4 文本修饰

2.5 文本描边

结语

---

【往期回顾】

【CSS3系列】第二章 · CSS3 新增盒模型和背景属性

【CSS3系列】第一章 · CSS3新增的三种基本属性

---

【其他系列】

【HTML5系列】

【HTML4系列】

【CSS2系列】

【Java基础系列】

---

1. CSS3新增边框属性

---

1.1 边框圆角

• 在 CSS3 中，使用 border-radius 属性可以将盒子变为圆角。
• 同时设置四个角的圆角：

border-radius:10px;

• 分开设置每个角的圆角（几乎不用）：

• 分开设置每个角的圆角，综合写法（几乎不用）：  

border-raidus: 左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下y

代码演示：

---

1.2 边框外轮廓（了解）

• outline-width ：外轮廓的宽度。
• outline-color ：外轮廓的颜色。
• outline-style ：外轮廓的风格。
  • none ：无轮廓
  • dotted ：点状轮廓
  • dashed ：虚线轮廓
  • solid ：实线轮廓
  • double ：双线轮廓
• outline-offset 设置外轮廓与边框的距离，正负值都可以设置。
  • 注意： outline-offset 不是 outline 的子属性，是一个独立的属性。
• outline 复合属性：

outline:50px solid blue;

代码演示：

    
    
    


    
你好啊
    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, architecto.

---

 2. CSS3新增文本属性

---

2.1 文本阴影

• 在 CSS3 中，我们可以使用 text-shadow 属性给文本添加阴影。
• 语法：

text-shadow: h-shadow v-shadow blur color;

•  默认值： text-shadow:none 表示没有阴影。

    
    
    


    
欢迎学习前端

---

2.2 文本换行

• 在 CSS3 中，我们可以使用 white-space 属性设置文本换行方式。
• 常用值如下：

 

    
    
    


    

        山回路转不见君           
        雪上空留马行处
        山回路转不见君 山回路转不见君山回路转不见君山回路转不见君山回路转不见君
        雪上空留马行处
        山回路转不见君
        雪上空留马行处
        山回路转不见君
        雪上空留马行处
        山回路转不见君
        雪上空留马行处
        山回路转不见君
        雪上空留马行处
    

---

2.3 文本溢出

• 在 CSS3 中，我们可以使用 text-overflow 属性设置文本内容溢出时的呈现模式。
• 常用值如下：

• 注意：要使得 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible值， white-space 为 nowrap 值。

    
    
    


    

        
焦点访谈：隐形冠军 匠心打造 分毫必争
        
我，嫁到日本才发现，女性活得真憋屈，体毛不能有，放屁也不自由
        
高洪波无缘！足协盟主热门人选曝光，3选1，冷门人物或成黑马杀出
        
《狂飙》爆火以后“疯驴子”被骂上热搜：跪着赚钱丢人吗
        
气温猛降15℃，冷空气再来袭！这些地方迎大范围降雨！“虚高”气温大跳水！！！！！
    

---

2.4 文本修饰

• CSS3 升级了 text-decoration 属性，让其变成了复合属性。

text-decoration: text-decoration-line || text-decoration-style || text-decorationcolor

子属性及其含义：

• text-decoration-line ：设置文本装饰线的位置
  • none ：指定文字无装饰 （默认值）
  • underline ：指定文字的装饰是下划线
  • overline ：指定文字的装饰是上划线
  • line-through ：指定文字的装饰是贯穿线
• text-decoration-style  ：文本装饰线条的形状
  • solid ：实线 （默认）
  • double ：双线
  • dotted ：点状线条
  • dashed ：虚线
  • wavy ：波浪线
• text-decoration-color ：文本装饰线条的颜色

    
    
    


    
你好啊，欢迎学习前端

---

2.5 文本描边

• 注意：文字描边功能仅 webkit 内核浏览器支持。
• -webkit-text-stroke-width ：设置文字描边的宽度，写长度值。
• -webkit-text-stroke-color ：设置文字描边的颜色，写颜色值。
• -webkit-text-stroke ：复合属性，设置文字描边宽度和颜色。

    
    
    


    
欢迎学习前端

---

结语

---

本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力