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属性有两 ...
随机推荐
- webstorm vue高亮
文件->设置->文件类型 第一步 第二步选择html 添加*.vue 搞定
- usr类库的使用(一般用在第三方类库使用系统库报错头文件找不到时)
第三方Html解析类库Hpple,在导入框架libxml2.2.dylib后,XCode仍然找不到<libxml/tree.h>. 1 .项目 -Targets 中的 Build P ha ...
- Mybatis映射文件
Mapper XML 文件 MyBatis 的真正强大在于它的映射语句,也是它的魔力所在.由于它的异常强大,映射器的 XML 文件就显得相对简单.如果拿它跟具有相同功能的 JDBC 代码进行对比,你会 ...
- divmod(a,b)函数是实现a除以b,然后返回商与余数的元组、eval可以执行一个字符串形式的表达式、exec语句用来执行储存在字符串或文件中的Python语句
#!/usr/bin/env python a = 10/3 print(a) #divmod计算商与余数 r = divmod(10001,20) print(r) #eval可以执行一个字符串形式 ...
- JQ完成表格单元格顺序的上移下调
如有指教及疑问,欢迎留言 HTML代码 <table class="exampletable"> <thead> <tr> <th> ...
- MacOS X Terminal中设置代理
MacOS X中,即使在网络设置中配置了代理连接,Terminal中也不能访问不可描述的东西,需要额外设置. 我用的是Shadowsocks,使用privoxy搭建了本地的代理服务器,地址是http: ...
- 用Charles抓取https接口数据
由于我之前抓取的某APP接口全面换上了https接口,导致我在抓取过程中遇到了很大的困境 用Charles无法获取到内容,由于现在已经搞定了,无法展示当时的错误信息,我从网站找了一个类似的错误信息 首 ...
- javascript的继承小结
继承是OO语言中最为津津乐道的概念,一般有两种继承方式,接口继承和实现继承,接口继承只继承方法签名,实现继承则是集成真正的方法.由于js中函数没有签名,因此ECMAScript中没有接口继承,只有实现 ...
- python test
#!/usr/bin/env python #-*- encoding: utf- -*- ''' def foo(name): print name, '去砍柴' foo('yangshanlei: ...
- 转:详解Eclipse断点
详解Eclipse断点(原) 详解Eclipse断点 大家肯定都用过Eclipse的调试的功能,在调试的过程中自然也无法避免要使用断点(breakpoint),但不知是否对Eclipse中各类断点都有 ...