一、

现在前面只写知识点,全部内容放在后面截图展示:

给元素添加圆角:

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圆角(还有百分比设置椭圆) 阴影 字体的更多相关文章

  1. CSS3圆角详解

    一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...

  2. CSS3圆角详解(border-radius)

    1.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: 减少维护的工作量.图片文件的生成.更新.编写 ...

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

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  4. 从零开始学习前端开发 — 16、CSS3圆角与阴影

    一.css3圆角: border-radius:数值+单位; 1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等) 2.设置两个值 border- ...

  5. css3圆角矩形、盒子阴影

    css3圆角矩形 div{ width: 200px; height: 200px; border: #f00 solid 1px; margin-bottom: 10px; } 1.设置 borde ...

  6. 【Web】CSS实现抖音风格字体效果(设置文本阴影)

    简单记录 -慕课网- 步骤一:抖音风格字体效果 案例:抖音风格的字体特效. 实现这个 需要设置 网页背景颜色 字体颜色 字体大小 文本阴影 重点介绍如何设置文本阴影 CSS的文本阴影text-shad ...

  7. CSS3圆角

    使用border-radius属性: (1): (2)但是,如果你要在四个角上一一指定,可以使用以下规则: 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值: ...

  8. CSS3圆角详解第一辑

    有很多人都知道圆角怎么写,加一个border-radius就可以,但是对于用圆角的一些细节却并不是很清楚,那么我们今天就来聊一聊这个圆角.CSS3是样式表(style sheet)语言的最新版本,它的 ...

  9. css3圆角边框

    圆角边框 一.border-radius属性简介   为元素添加圆角边框,可以对元素的四个角进行圆角设置(属性不具有继承性) 二.border-radius定义方法 border-radius属性有两 ...

随机推荐

  1. R语言解读多元线性回归模型

    转载:http://blog.fens.me/r-multi-linear-regression/ 前言 本文接上一篇R语言解读一元线性回归模型.在许多生活和工作的实际问题中,影响因变量的因素可能不止 ...

  2. 怎样处理“error C2220: warning treated as error - no object file generated”错误

    最近用VS2010 编译ceflib开源库是出现"怎样处理"error C2220: warning treated as error - no object file gener ...

  3. [OC][地图] 高德地图之定位初探(一)

    使用前的说明 高德地图开放平台的iOS定位模块网址-->http://lbs.amap.com/api/ios-location-sdk/summary/ 高德地图有Web端.android平台 ...

  4. 在myeclipse下安装svn的几种方式

    方法一:在线安装 1.打开HELP->MyEclipse Configuration Center.切换到SoftWare标签页. 2.点击Add Site 打开对话框,在对话框Name输入Sv ...

  5. slideDoor(学习某编程网站的,仅作记录和学习)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. WinForm中MouseEnter和MouseLeave混乱的问题

    MouseEnter+MouseLeave不行,我用了MouseMove+MouseLeave,效果一样 最近做个聊天的系统,仿照qq的界面设计,像qq聊天界面中字体.表情.截图等图片,鼠标放上去显示 ...

  7. IaaS、PaaS、SaaS 之间的区别

    IaaS.PaaS.SaaS 之间的区别 “云服务”现在已经快成了一个家喻户晓的词了.如果你还不知道PaaS.IaaS和SaaS的区别,那就太out了. “云”其实是互联网的一个隐喻,“云计算”其实就 ...

  8. C# for循环 循环中先求长度还是使用list.Count,哪个效率高

    这种问法可能问的不好.应该说成是第一种方法完全没有必要,很多人可能以为那样会为代码带来效率,而实际上是不会给效率带来任何提升. 因为事实上,索引器内部,为了安全期间,还是会去求整个list的count ...

  9. 虚拟centos7 用ssh登录

    在虚拟机(Vmware Workstation)下,安装了CentOS7,现在想通过SSH工具连接虚拟机中的CentOS7 1.  首先,要确保CentOS7安装了  openssh-server,在 ...

  10. gvim 快速编辑例子

    1 准备工作 首先, 我们打开 VIM, 输入一段文本,  用于今天的演示: this is a test 2 查找替换 按几下 ESC 进入 Normal 模式, 输入以下命令: :%s/ /\r/ ...