css3圆角(还有百分比设置椭圆) 阴影 字体
一、
现在前面只写知识点,全部内容放在后面截图展示:
给元素添加圆角:
border-radius属性,他的值如果等于高的一半,将会等到一个圆形,大于一半叶然是一个圆形
radius是指半径,他求出圆在矩形上的切面。
border-radius可以设置4个方向的值。
二、
box-shadow为元素添加阴影
书写格式:
box-shadow:水平阴影的位置 垂直阴影的位置 模糊距离 颜色
例子:box-shadow:10px 20px 5px blue
css3文本效果
text-shadow(文字阴影)
这个属性可以指定水平阴影、垂直阴影、模糊的距离以及阴影的颜色。
例子:
P{text-shadow:5px 5px 5px #FF0000}
三、
CSS3字体
写法:
@font-face{font-family:自定义名字;src:url(“引入字体的路径”)}
p{font-family:你自定义的名字;}
以下是详细信息





css3圆角(还有百分比设置椭圆) 阴影 字体的更多相关文章
- CSS3圆角详解
一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...
- CSS3圆角详解(border-radius)
1.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: 减少维护的工作量.图片文件的生成.更新.编写 ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- 从零开始学习前端开发 — 16、CSS3圆角与阴影
一.css3圆角: border-radius:数值+单位; 1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等) 2.设置两个值 border- ...
- css3圆角矩形、盒子阴影
css3圆角矩形 div{ width: 200px; height: 200px; border: #f00 solid 1px; margin-bottom: 10px; } 1.设置 borde ...
- 【Web】CSS实现抖音风格字体效果(设置文本阴影)
简单记录 -慕课网- 步骤一:抖音风格字体效果 案例:抖音风格的字体特效. 实现这个 需要设置 网页背景颜色 字体颜色 字体大小 文本阴影 重点介绍如何设置文本阴影 CSS的文本阴影text-shad ...
- CSS3圆角
使用border-radius属性: (1): (2)但是,如果你要在四个角上一一指定,可以使用以下规则: 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值: ...
- CSS3圆角详解第一辑
有很多人都知道圆角怎么写,加一个border-radius就可以,但是对于用圆角的一些细节却并不是很清楚,那么我们今天就来聊一聊这个圆角.CSS3是样式表(style sheet)语言的最新版本,它的 ...
- css3圆角边框
圆角边框 一.border-radius属性简介 为元素添加圆角边框,可以对元素的四个角进行圆角设置(属性不具有继承性) 二.border-radius定义方法 border-radius属性有两 ...
随机推荐
- highcharts php请求mysql返回json数据作为数据源进行制图
直接上代码 [官方文档请参见http://www.highcharts.com/docs/working-with-data/getting-data-across-domains-jsonp] [实 ...
- Apache配置文件讲解
持续作用扩展自 HTTP/1.0 和 HTTP/1.1 的长连接特性.提供了长效的 HTTP 会话,用以在同 一个 TCP 连接中进行多次请求. 在某些情况下, 这样的方式会对包含大量图片的 ...
- 为什么当多个inline-block的div中,如果有的div没有内容而有的div有内容,有内容的会下沉?
为什么当多个inline-block的div中,如果有的div没有内容而有的div有内容,有内容的会下沉? 就像这样 两个div高度相同,第二个我写了一个1当作 有内容吧,它就下沉了... 奇怪... ...
- 数据库:django ORM如何处理N+1查询
数据库N+1查询是个常见的问题,简单描述场景如下 基本场景 class Category(models.Model): name = models.CharField(max_length=30) c ...
- 关于面试别问及Spring如何回答思路总结!
首先要知道 Spring两大核心IOC和AOP(Java轻量级业务层框架Spring两大核心IOC和AOP原理) IOC: 1.从Java最基本的创建对象开始 如Interface Driven De ...
- VB默认属性、动态数组、Range对象的默认属性的一点不成熟的想法
1.默认属性 VB6.0有默认属性的特性.当没有给对象指定具体的属性时,"默认属性"是VB6.0将使用的属性.在某些情形下,省略常用属性名,使代码更为精简. 因为CommandBu ...
- Kanzi编程基础2 - Kanzi节点读取和属性设置
UI设计师在Kanzi studio把Kanzi的节点做好后,就要编码读取这些节点并根据实际功能去控制刷新它. Kanzi读取节点的api发生过很多次变化,从2.7.2.8到3.0,每次变化都比较大, ...
- Solr内置的字段类型
字段类型在org.apache.solr.schema包下 Class 描述 BCDIntField 二进制整形字段 BCDLongField 二进制长整形字段 BCDStrField 二进制字符型字 ...
- Java方法trim()小记
我们一般用trim()方法的主要作用,是为了去除字符串的首尾空格.然而根据我个人的实践经验发现,trim()这个方法只能去除部分的空格或空白符,比如半角空格:对于全角空格的话,用trim()并不能去除 ...
- 发布一个开源极致的javascript模板引擎tpl.js
tpl.js(大家直接去https://git.oschina.net/tianqiq/tpl.js这个上面看) 简介 tpl.js是一个比较极致(极小,极快,极简单)的js模板引擎,可以在各种js环 ...