文本属性

在网页设计中，一些特殊的效果能给网页增加不一样的视觉体验，给人焕然一新的感觉，更加吸引群众。例如：

1.给文字增加阴影效果

<div id="mydiv2">给文本添加阴影</div>#mydiv2{font-size: 30px;text-shadow:0px 6px 5px red ;}

如图所示：text-shadow的四个数值属性依次是： x:左右距离 y：上下距离焦距：距离越远越模糊颜色

2.给图片增加阴影

<img class="myshadow" src="img/QQEmail.jpg" />img{/*给元素添加阴影*/box-shadow: 4px 5px 5px rgb(100,100,100);}

代码中的rgb(x,y,z) rgba(x,y,z, 1以内的小数) 其中rgba的最后的小数表示透明度,值越小越透明。rgb中的r（red 红），g（green 绿），b（blue 蓝），数值代表各个色的显示亮度，取值在0-255之间。
如图所示：左边的阴影部分显现出来的层次感。

以及鼠标悬浮在上面也可以出现阴影效果：

img.myshadow:hover{box-shadow: 0px 12px 30px  rgba(0,0,0,0.9);transition: all 0.5s linear;/*综合属性*/}

如图所示为鼠标悬浮在图片上之后的效果，四周都出现了阴影。

CSS的文本属性阴影效果相关推荐

如何设置文本不换行省略号显示等CSS常用文本属性
如何让多余的文本省略号显示首先要说几个属性的作用: whitespace:nowrap 中文行末不断行显示 overflow: 控制超出文本的显示方式:hidden 超出范围文本隐藏:scroll 始 ...
CSS选择器/CSS字体文本属性/CSS引入方式/案例
CSS 1.CSS简介 1.1 HTML的局限性虽然 HTML 可以做简单的样式,但是带来的是无尽的臃肿和繁琐 1.2 CSS-网页的美容师 CSS 是层叠样式表 ( Cascading Style ...
2.css字体文本属性
一.字体风格 font-family 字体(比如宋体,微软雅黑) font-size 字体大小 font-weight 字体粗细(700加粗,400正常) font-style 字体风格(normal ...
css之文本属性text-align/text-decoration(取消a标签下划线)/text-indent/line-height
(:first-child.:nth-child(n).:last-child的含义:https://www.cnblogs.com/knightdreams6/p/11109755.html) 1. ...
css设置h1属性,CSS设置文本属性
本文属性词汇文本字体 font-family文本大小 font-size文本粗细 font-weight文本风格 font-style 文本字体使用示例指定字体系列 boby {font-fami ...
【CSS】文本属性、字体属性
文章目录一.color属性英语单词表示法十六进制表示法 rgb()表示法 rgba()表示法二.font-size属性三.font-weight属性四.font-style属性五.tex ...
从零开始学前端：CSS字体属性和文本属性 --- 今天你学习了吗？（CSS：Day08）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS引入 - 今天你学习了吗?(CSS:Day07) 文章目录从零开始学前端:程序猿小白也可以完全掌握 ...
CSS常用属性之文本属性（四）
CSS常用文本属性主要有:text-decoration.text-indent.line-height.font.text-align.word-spacing.letter-spacing等等.. ...
1.2 CSS文本属性
CSS Text(文本)属性: 定义文本外观,颜色,装饰,缩进,行间距来修饰文本文本样式文本缩进 text-indent 文本水平对齐方式:text-align 文本修饰:text-decorat ...

CSS的文本属性阴影效果

文本属性

1.给文字增加阴影效果

2.给图片增加阴影

CSS的文本属性阴影效果相关推荐

最新文章

热门文章