字体引入+盒子阴影

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;
}
@font-face{
 font-family:fz;
 src:url(font/fz.ttf)}
</style>
2.盒子模型的阴影效果
h1{
 box-shadow:2px 1px 30px 3px yellow;   向右边移2px 向下移动1px 模糊度为30px 阴影的宽度为3px 阴影的颜色为黄色
 width:500px;
 height:50px;
 text-align:center;
}

时间: 2024-10-07 08:48:46

字体引入+盒子阴影的相关文章

字体图标 盒子阴影

字体图标 <!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=&

css.盒子阴影

div{ width:100px; height:100px; font-size:212px; background-color:red; border-radius: 15px 24px 33px 42px; /* 四个半径值分别是左上角.右上角.右下角和左下角,顺时针 */  } <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-

&#183;DIV 行内关联 box-shadow对象盒子阴影以及图片阴影

盒子阴影样式单词:box-shadow 语法 <style> div{box-shadow:0 0 1px #000 inset;} </style> 其中,第一个和第二个0分别代表边框间距靠左和靠上:1px表示阴影范围:#000表示阴影颜色为黑色:inset 代表框内阴影 ,没有inset 则代表框外阴影. 需要注意的是: box-shadow:0px 0px 1px #000当第1个值为0时,代表左右边框阴影 为1px范围第1个值为正整数 代表 左边框阴影第1个值为负整数 代表

CSS3 --添加阴影(盒子阴影、文本阴影的使用)

CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种阴影的使用: 1,盒子阴影(1)盒子阴影的属性是 box-shadow1box-shadow:5px 5px 10px gray;前两个值分别表示阴影水平方向和垂直方向的偏移量.第三个值表示模糊距离.最后一个值是阴影颜色. (2)盒子阴影是可以随着盒子形状而自动变化的原文:CSS3 - 给div或者文

探索盒子阴影box-shadow

盒子阴影之探索 盒子阴影:box-shadow 作用:在盒子不同的方位添加你想要的阴影效果. box-shadow有六个参数值,下面一一举例说明 语法: Box-shadow: offset-x | offset-y | blur | sperd | color| position | 注意!!!以上也是box-shadow默认的排序! 第一:offset-x 阴影的水平偏移量,即X轴上阴影的位置,正值出现在元素的右侧负值在左侧. 当为正值代码: div { width: 200px; heig

css背景图片、圆角、盒子阴影、浮动

一.css背景图片 1.概述 背景是css中一个重要的的部分,也是需要知道的css的基础知识之一.这里主要介绍有关背景图片的5种常见属性,分别是: (1). background-color: rgb(0, 0, 255); background-color: #0000ff; background-color 也可被设置为透明(transparent),这会使得其下的元素可见. 3.背景图(background-image) background-image 属性允许指定一个图片展示在背景中.

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

大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事情,很多代码都能实现. 下面给大家简单介绍两种最为常见的圆角边框和盒子阴影,同时附上一个iphone 手机效果,提供大家练习. 1.border-radius 圆角矩形 语法格式: border-radius:  水平半径/垂直半径 只不过我们平时都把后面的这个垂直半径给省略了. 圆角也有连写的方法 border-radius: 左上角  右上角  右下角  左下角;  

盒子阴影 box-shadow

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒子阴影</title> <style> .box { width: 200px; height: 200px; background-color: orange; margin: 200px auto; /*opacity: 0;*/ transition: .3s; } .box

52 标签的影藏,盒子阴影,三种定位,js导入和语法

标签的隐藏 display: none; 不以任何方式显示,在页面中不占位,但重新显示,仍然占位 opacity:0.5; 修改盒子的透明度,值为0,完全透明,但在页面中占位 盒子的阴影 box-shadow: 150px 0 10px 0 red, 0 150px 10px 0 green; x轴偏移 y轴偏移 虚化程度 阴影宽度 颜色 盒子的三种定位固定定位 当前页面窗口的宽高(锁屏幕尺寸变化而变化):vw vh 一旦打开定位属性,left.right.top.bottom四个方位词均能参与