一、

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

给元素添加圆角:

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. mybatis 如何使用乐观锁

    悲观锁的问题: 因为悲观锁大多数情况下依靠数据库的锁机制实现,以保证操作最大程度的独占性.如果加锁的时间过长,其他用户长时间无法访问,影响了程序的并发访问性,同时这样对数据库性能开销影响也很大,特别是 ...

  2. ViewPager +Fragment 滑动游标

    一.我的博客https://github.com/anan03/ananwork/tree/master/anan1.加入compile 'com.gxz.pagerslidingtabstrip:l ...

  3. ReportService未指定 OverwriteDataSources

    报表服务器部署好之后,查看报表就显示ConnectionString 属性尚未初始化. 然后重启部署并查看部署时控制台的输出信息,发现之前的部署成功消息是假象,实际上部署的时候有一个警告: 不能将数据 ...

  4. 您可能不曾注意的C++内置类型选择和使用的注意事项

    写在前面: 太忙了,好久没有写博客.这篇文章是在下读C++ Primer中文第五版(与以往版本相比,第五版的一大特色就是“为新的C++11标准重新撰写”——引自封皮)时的笔记,没有什么技术含量,只是作 ...

  5. 2014鸟人Birdman中文字幕文件下载

    下载后,解压缩,会得到 Birdman.2014.1080p.WEB-DL.DD5.1.H264-RARBG.srt 文件,把这个文件放到视频文件(mkv文件)相同的文件夹里. 用暴风影音播放,如果没 ...

  6. css3 三角形

    https://jsbin.com/gexezo/edit?html,css,output https://jsbin.com/gexezo

  7. [地图SkyLine二次开发]关于IE内存限制问题(1G)

    相信很多人也遇到过同样的问题,地图加载中,IE占用的内存一直增加,到了1G多一些的时候,IE就崩溃了. 在网上查阅了一番,有很多结果,下面归纳一下: a).64bit的IE最多可达到4G的内存,但Sk ...

  8. venus

    The Venus system was a small timesharing system serving five or six users at a time:分时系统 The design ...

  9. OCP笔记001

    2. View the Exhibit to examine the description for the SALES table. Which views can have all DML ope ...

  10. PHP data