css text-decoration 可以是自定义效果吗

2024-08-02

CSS 文字装饰 text-decoration & text-emphasis

在 CSS 中,文字算是我们天天会打交道的一大类了,有了文字,则必不可少一些文字装饰. 本文将讲讲两个比较新的文字装饰的概念 text-decoration 与 text-emphasis,在最后,还会讲解使用 background 模拟文字下划线的一些有趣的动效. text-decoration 文字装饰 text-decoration 意为文字装饰,在很早的规范 CSS Level 2 (Revision 1) -- text-decoration 就已经存在了.譬如我们非常熟知的下划线 t

三角形变形记之纯css实现的分布导航条效果

三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-size:13px; font-weight:bold; } li { float:left; position:relative; line-height:30px; background:#9BBB38; color:#fff; width:100px; height:30px; text-align:cen

css浮动+应用（瀑布流效果的实现）

首先是index.html文件: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动</title> <link href="style2.css" type="text/css" rel="stylesheet"> </head> <body>

css设置背景固定不滚动效果的示例

css设置背景固定不滚动效果的示例背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背景不滚动的效果 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

CSS Text（文本）

CSS Text(文本) 一.文本颜色 color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 一个网页的背景颜色是指在主体内的选择: body {color:red;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);} 注意:对于W3C标准的CSS:如果你定义了颜色属性,你还必须定义背景色属性. 二.文本的对齐方式 t

纯CSS实现项目展示遮罩详情效果

本实例主要用于项目展示时鼠标hover后显示一个遮罩显示项目详情的效果,遮罩采用CSS的绝对定位以及CSS3盒子模型. 本实例应用广泛,很多品牌官方网站均有采用. hover: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>纯CSS实现项目展示遮罩详情效果</title> <link rel="shortcut icon&qu

HTML+CSS+Javascript实现轮播图效果

HTML+CSS+Javascript实现轮播图效果注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } /*去掉ul.ol.li源有的样式*/ ul, ol, li { list-style: none; } /*设置图片样式为*/ img { width:

css的img移上去边框效果及CSS透明度

css的img移上去边框效果: .v_comment img{ height:36px; height:36px; float:left; padding:1px; margin:2px; border: 1px solid #ddd; }.v_comment img:hover{border: 1px solid #ccc; -webkit-animation: comm 1.1s ease-in infinite; box-shadow:0 0 2px rgba(0,158,224,0.9)

纯CSS实现各类气球泡泡对话框效果

原文纯CSS实现各类气球泡泡对话框效果一.关于纯CSS实现气泡对话框首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一点图片都没有哦.看到这里,你是不是跟我一样,有些惊叹CSS的潜力呢.关于这张图片,暂时先放到一边,下面我要讲一些与主旨相关的比较重要的,同时又很实用的一些技术. 我们首先看下面这一张图片(截自人人网): 可能颜色有点淡,在左上角有个90度的尖角,于是整个形成了一个气泡对话框.现在考考你,如果你来实现

简单css实现input提示交互动画效果

通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; } .input-fill-x, .input-outline-x, .textarea-outline-x { position: relative; } .input-control:focus + label { color: red; background: white; transfor

使用CSS定位元素实现水平垂直居中效果

总结一下平时使用CSS技巧使元素达到水平居中效果相对定位(或绝对定位)实现水平垂直居中: element{ position:relative; /*这个属性也可以是absolute*/ width:200px; /*宽度按自己的要求设定*/ height:500px; /*高度按自己的要求设定*/ margin-left: -100px; /*这个值是宽度的一半,如宽度设置了100px,则这个属性的值就是-50px*/ margin-top: -250px; /*这个值是高度的一半*/ le

一款纯css实现的垂直时间线效果

今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: ... 阅读原文:一款纯css实现的垂直时间线效果

CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法

CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width: 260px; height: 440px; border: 2px solid transparent; @extend %borderbox; &:hover{ border-color: #109ef3; } } img{ width: 100%; height: 100%; } }

零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果

原文:零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果本章将教大家如何活用「Text On Path」,做出文绕图以及文字线性排列的效果也可以学到如何使用Polyline以及B-Spline ? 本章将教大家如何活用「Text On Path」,做出文绕图以及文字线性排列的效果也可以学到如何使用Polyline以及B-Spline ? 范例最後成果图片: ? 跟着做,就能做初出跟范例一样的效果了! ? 01

HTML+CSS之光标悬停图片翻转效果

设计思路: 首先做一个包括图片和说明文字的简单的页面结构,然后再设置它的变换.将变换的元素,即照片和文字放在一个父容器里面,这就需要四个父容器 ,再将这四个父容器放在最外层的舞台上面进行变换,在每个父容器里面都包括两部分:一个是上面的图片,还有一个是下面的说明文字.最后采用层定位将图片和下面的说明文字让它有一个叠加的效果.先显示这个图片,当鼠标悬停在上面的时候,由于做了3D变换,(即每幅图片翻转的效果是围绕Y轴翻转180度来进行的),那么后面的文字就会被显示出来. ㈠HTML主页

CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]

转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不同图形的方法.今天花了点时间将这方面的制作成一份清单,方便大家急用时有地方可查.别的不多说了,直接看代码. 为了节省时间,下面图形都采用的一个标签,可以是块元素也可以是行内元素,不过行内元素需要加上“display:block;”,唯一不同的是,在此用了不同的类名来区别,相关类名我放在了标题的后面,以便大家对

css text gradient color, css fonts gradient color

css text gradient color, css fonts gradient color css 字体渐变色 demo https://codepen.io/xgqfrms/pen/OJyajmp gradient text & gradient background https://www.cnblogs.com/xgqfrms/p/11882034.html -webkit-background-clip & -webkit-text-fill-color .class{ b

CSS学习笔记三：自定义单选框，复选框，开关

一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1"> <input type="radio" name="radio-1" id="radio-1-1"> <label for="radio-1-1"></label> <

css 滚动视差之水波纹效果

核心属性: background-attachment 这个属性就牛逼了, 它可以定义背景图片是相对视口固定, 还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成高大上. 我们来看个例子: html: <div class="attach view"></div> <div class="text view">I WANT FLY</div> <div class="attach view"

CSS鼠标悬停图片加边框效果,不位移的方法

<!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效果</title> <style type="text/css"> body{background:#222;color:#06c;} em{ font-style:inherit;} img{background:white;margin:0 5px;width:

animate.css 一些常用的CSS3动画效果

大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:http://daneden.me/animate/ 自定义下载样式:http://daneden.me/animate/build/ git地址:https://github.com/daneden/animate.css

css text-decoration 可以是自定义效果吗

热门专题