一、

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

给元素添加圆角:

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. iOS高性能设置圆角

    自建一个分类可以设置. -(void)cornerImageWithSize:(CGSize)size fillColor:(UIColor *)fillColor completion:(void( ...

  2. 关于AJAX 的交互模型、交互流程及代码示范

    AJAX  = 异步JavaScript + XML. 它是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况 ...

  3. msys2安装

    最近在研究编译linux下的软件到windows环境中. 发现了一个比cygwin更好玩的东西,那就是msys2 其实之前也在试玩mingw和mingw64,2016-08-12,当时的最新版本,mi ...

  4. 安装升级npm依赖

    npm-check 能够自动检索npm包版本,并且提供交互操作界面: 有以下功能: 1.告诉你那些依赖已经过时: 2.在你决定升级时,给你提供依赖包的文档: 3.提示某个依赖没有被你使用: 4.支持全 ...

  5. [linux] scp无密码拷贝

    源服务器为s,ip为111.111.111.112. 目标服务器为d, ip为111.111.111.111 1>在源服务器新建用户 test_s, useradd test_s -g user ...

  6. Express+mysql的博客(1)

    学了东西一定要自己上手试过才知道是不是真的会了.一直想练练node的使用,本来也没有什么好想法的,经同学提醒了一下,发现其实我可以用node写一个博客.我同学说工作量会非常之大╮(╯_╰)╭那也得先试 ...

  7. arm cache line,PLD指令

    C中嵌入汇编PLD指令:asm("PLD [%0,#128]": :"r" (psrc) ); copy自官方文档: 4.2.7. PLD.PLDW 和 PLI ...

  8. 解决在CAPSLOCK开启情况下sendkeys大小写异常的问题

    http://files.cnblogs.com/files/liuzhaoyzz/sendkeys%E5%A4%A7%E5%B0%8F%E5%86%99.rar 首先利用GetKeyState(vb ...

  9. C#中使用Linq实现全外连接

    每次使用都到处查阅,现在记录下来,备查. var fulljoin = (from s in sampleRegistersjoin t in tensionDatas on new { Beach ...

  10. ORACLE RAISE

    ORACLE 出错信息的输出 偷懒的办法直接在Exception 后使用raise但是错误信息不是很完整使用RAISE_APPLICATION_ERROR(-20999, DBMS_UTILITY.f ...