字体图标 盒子阴影

字体图标

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>字体图标</title>
	<!-- 使用第三方库 -->
	<!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
	<!-- <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> -->
	<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
	<style type="text/css">
		.i1 {
			/*font-size: 30px;*/
			color: orange;
		}
	</style>
</head>
<body>
	<i class="i1 fa fa-spinner fa-4x fa-spin"></i>
</body>
</html>

盒子阴影

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>盒子阴影</title>
	<style type="text/css">
		.box {
			width: 200px;
			height: 200px;
			background-color: red;
			margin: 350px auto;
			/*盒子阴影*/
			/*x轴偏移 y轴偏移 虚化长度 阴影宽度 阴影颜色*/
			/*多个值之间用,隔开*/
			box-shadow: -310px 0 30px 0px yellow, 310px 0 30px -10px green, 0 -310px 30px -10px orange, 0 310px 30px -10px blue;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

原文地址:https://www.cnblogs.com/layerluo/p/9721400.html

时间: 2024-10-05 07:32:58

字体图标 盒子阴影的相关文章

字体引入+盒子阴影

20150409 字体在网页中显示1.首先把字体放入font文件包h1{ font-size:50px; text-align:center; color:green; font-family:my;   可以随意命名和下面的font-family名字必须一致}@font-face{ font-family:my; src:url(font/y.ttf);}.aa{ font-size:30px; text-align:center; color:red; font-family:fz;}@fo

css3总结(三)立方体、动画、web字体、字体图标、弹性布局、多列布局、伸缩盒子

目录: 1.立方体2.动画3.设置动画的一些属性4.案例:无缝滚动5.web字体6.弹性布局7.多列布局8.弹性布局9.案例:伸缩盒子的flex属性的应用案例(菜单个数不限)10.伸缩盒子的align-items属性     设置侧轴对齐方式11.案例:伸缩盒子,宽高自适应 1.立方体    *transform-style: preserve-3d;/*子元素保留其3d样式*/ <!DOCTYPE html> <html> <head> <title>立方

CSS字体图标

字体图标 图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的.更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真. 我们后面会学习移动端响应式,很多情况下希望我们的图标是可以缩放的.此时,一个非常重要的技术出现了,额不是出现了,是以前就有,是被从新"宠幸"啦.. 这就是字体图标(iconfont). 字体图标优点  可以做出跟图片一样可以做的事情,改变透明度.旋转度,等.. 

CSS3属性+iconfont字体图标的使用方法

CSS3属性文本阴影:text-shadow:水平阴影 垂直阴影 模糊度 颜色: 可以多组值共同存在,用逗号隔开多层文本阴影的设置:text-shadow:第一层,第二层,第三层: 文本换行: 在单词内部换行: word-wrap:: normal:默认值,不允许在单词内部换行. break-word:允许单词内部换行. word-break:: break-all 允许在单词内部换行 keep-all 允许在换行点换行,单词内部不换行盒子阴影: box-shadow:水平阴影 垂直阴影 模糊度

练习,字体图标和before,afer伪类的方式开发慕课网右下角工具条

这个效果点击慕课网的这个地址就可以查看. 1. 字体图标的方式 相比较背景图片的方式,使用字体图标,会明显增加html结构的复杂度: <div class="toolbar-container"> <a href="javascript:;" class="tbitem tbitem-weixin"> <div class="tbitem-wrapper"> <span class=&

如何使用iconfont字体图标代替网页图片?

一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜色,可以添加阴影,旋转,透明度等视觉效果. 3.兼容性 图标字体IconFont支持所有现代浏览器,包括IE低版本. 二.IconFont的缺点 1.图标字体只能被渲染成单色或者css3的渐变色: 2.设计自已的IconFont需要花费大量时间,也会增加前端重构的成本: 3.Firefox和IE9不

Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标

Font Awesome 为您提供了一套可缩放的字体矢量图标,可以快速自定义图标的大小,颜色,阴影,这些都可以通过CSS来实现,无需任何的JS代码哦. 一,主要特点如下: 1,一个字体,369个图标 2,无需要使用JavaScript 3,通过CSS自定义图标的大小,颜色,阴影 4,用户界面友好 5,支持 Internet Explorer 7 浏览器 6,能够在 Retina 屏幕完美呈现 7,和其它图标字体不同,兼容屏幕阅读器 8,可扩展性强 9,文档完善 10,免费 二,图标类型下面简单罗

为什么我们放弃css sprite使用iconfont字体图标

说在开头 前面有一篇博客说道,项目中使用压缩和css sprite技术对图标进行分类和组合: 但随着项目的不断完善,我们也遇到了很多问题:   1.如何对图标进行分类:刚开始还比较好,我们对图标进行分类,大概有银行卡图标一类,增删改图标一类,支付类 型一类,等等.但随着,图标的不断增加和业务直接的交叉,发现分类变得很困难,渐渐失去耐心.如果,把所有图标集成到一张图:但是有这样一种情况:有些页面只使用了一个图标,同时用户只在这个页面进行操作:却要下载一整张大图,浪费资源. 2.图标位置不好控制,很

使用icomoon字体图标详解

使用icomoon字体图标详解 字体图标的优势:(isux的总结) 1.轻量性:一个图标字体比一系列的图像(特别是在Retina屏中使用双倍图像)要小.一旦图标字体加载了,图标就会马上渲染出来,不需要下载一个图像.可以减少HTTP请求,还可以配合HTML5离线存储做性能优化. 2.灵活性:图标字体可以用过font-size属性设置其任何大小,还可以加各种文字效果,包括颜色.Hover状态.透明度.阴影和翻转等效果.可以在任何背景下显示.使用位图的话,必须得为每个不同大小和不同效果的图像输出一个不