一、

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

给元素添加圆角:

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. [原]ComFriendlyWaitMtaThreadProc

    c++代码(大体逻辑没问题,细节需要确认) DWORD __stdcall *ComFriendlyWaitMtaThreadProc(LPVOID lpThreadParameter) { CoIn ...

  2. Swift基础语法学习总结(转)

    Swift基础语法学习总结 1.基础  1.1) swift还是使用// 和/* */ 来注释,并且/* */允许多行注释. 1.2) swift使用print和println打印,它的传参是一个泛型 ...

  3. Json解析实例

    using System; using System.Collections.Generic; using System.Runtime.Serialization; using System.Win ...

  4. linux开发摘要

    1.linux内核文档链接点击打开链接 2.配置文件 在out\target\product\project\obj\KERNEL_OBJ\.config中可以看到 # CONFIG_MTD_LPDD ...

  5. [POJ3111]K Best(分数规划, 二分)

    题目链接:http://poj.org/problem?id=3111 求选k对数,使得上述式子值最大.容易想到设左边为一个值,对式子变形以下,得到sigma(v-r*w))==0的时候就是最大的,& ...

  6. dsp28377控制DM9000收发数据

    首先感谢上一篇转载文章的作者给出的参考,下面是一些自己在调试过程中的一些步骤: 首先把代码贴上来: //------------------------------------------------ ...

  7. JMeter常用测试元件—学习笔记

    线程组 Ramp-Up Period:告诉JMeter达到最大线程数需要多长时间.假定共有10个线程,Ramp-Up Period为100秒,那么JMeter就会在100秒内启动所有线程,并让它们运转 ...

  8. sublime text2 换主题

    网上看到一款喜欢的主题,换掉初始的主题,感觉颜色浅一点会比较好看,看中了下面这款. 后来看到有在 github 上的人做的 ,这是地址 ,上面也有详细的如何更改的步骤,下面是我自己这里做个备份. 1. ...

  9. Oracle分页查询=======之伪列的使用

    ========伪列========== 在Oracle数据库中,伪列不存在表中,但是可以从表中查询到 例如:SELECT ROWID 伪列,tname 教师姓名 FROM teacher; ==== ...

  10. MySQL学习记录--分组与聚集

    一.group by 子句 group by 字句可对数据进行分组. 以MySQL5.5的sakila数据库中的film数据表举例:查找出各个电影等级的电影总数 mysql>SELECT rat ...