CSS边框的一个不足就是只有矩形的元素才能使用。

-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度,也能设置其颜色。

而且,配合使用color: transparent属性,还可以创建镂空的字体!

  1. h3 {
  2. color: transparent;
  3. -webkit-text-stroke: 4px red;
  4. }

CSS3 文字边框 -webkit-text-stroke 镂空的字体的更多相关文章

  1. css3新增边框、阴影、边框、背景、文本、字体

    css3和css有什么区别?简单来讲css3是css(层叠样式表)技术的升级版本,css3新特征有很多,例如圆角效果.图形化边界.块阴影与文字阴影.使用RGBA实现透明效果.渐变效果.使用@Font- ...

  2. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  3. CSS3之边框图片border-image

    CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...

  4. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  5. CSS3 文字渐变动画

    背景剪裁 语法:background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webki ...

  6. css3圆角边框

    圆角边框 一.border-radius属性简介   为元素添加圆角边框,可以对元素的四个角进行圆角设置(属性不具有继承性) 二.border-radius定义方法 border-radius属性有两 ...

  7. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  8. CSS3文字描边 CSS3字体外部描边

    给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...

  9. CSS自学笔记(12):CSS3文字特效

    在CSS3中新增了多个文本属性,同样有了这些属性我们在进行问题特效处理时,就尽可能少的用到其他软件去制作特效文字了. 在以前使用CSS进行web开发的时候,必须使用计算机上安装好的字体,如果有些用户的 ...

随机推荐

  1. Dubbo——服务目录

    引言 前面几篇文章分析了Dubbo的核心工作原理,本篇将对之前涉及到但却未细讲的服务目录进行深入分析,在开始之前先结合前面的文章思考下什么是服务目录?它的作用是什么? 正文 概念及作用 清楚Dubbo ...

  2. Page "页面路径" has not been registered yet.

    网上找了很多方法,但和我遇到的都不一样,我这个页面是我路由接口更改时遇到的错误,原因是我移动了文件,js里引用的文件找不到了 解决方法:更改引用路径即可

  3. [ C++ ] 勿在浮沙筑高台 —— 拾遗

    explicit 主要用于处理一个参数的构造函数,使其不用于隐式类型转换(防止二义性) operator->() C++设计 ->可以一直保留下去 仿函数 仿函数会隐式继承他们中的一个(详 ...

  4. MySQL一招入门

    连接mysql数据库命令:mysql -u root -p 创建mysql数据库:create databaase xx库; 创建mysql表: create table db_xx表( id int ...

  5. Python实用笔记——错误处理

    让我们用一个例子来看看try的机制: try: print('try...') r = 10 / 0 print('result:', r) except ZeroDivisionError as e ...

  6. 基于jQuery的打字机函数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. .NET Core控制台利用【Options】读取Json配置文件

    创建一个 .NET Core控制台程序 添加依赖 Microsoft.Extensions.Configuration Microsoft.Extensions.Configuration.FileE ...

  8. 无题II HDU - 2236 【二分图+二分答案】

    题目 这是一个简单的游戏,在一个n*n的矩阵中,找n个数使得这n个数都在不同的行和列里并且要求这n个数中的最大值和最小值的差值最小. Input 输入一个整数T表示T组数据. 对于每组数据第一行输入一 ...

  9. LeetCode54. 螺旋矩阵

    题意是,输入一个二维数组,从数组左上角开始,沿着顺时针慢慢地"遍历"每一个元素且每一个元素只遍历一次, 在一个新的一维数组中记录遍历的顺序,最终的返回值就是这个数组. 思路:可以考 ...

  10. 【Xamarin.Forms 2】App基础知识与App启动

    系列目录 1.[Xamarin.Forms 1]App的创建与运行 引言 本篇文章将介绍Xamarin.Forms中 App 基础知识和 App的启动. 开发环境 Visual Studio 2019 ...