1.boder-radius

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3边框border-radius以及box-shadow学习
</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
width: 120px;
height: 120px;
background-color: #F79101;
margin: 50px;
float: left;
} /*四个属性值都给 border-radius: 左上 右上 右下 左下*/
.box1 {
border-radius: 20px 50px 10px 40px;
}
/*只给三个 border-radius: 左上 (右上和右下) 左下*/
.box2 {
border-radius: 10px 50px 100px;
}
/*给2个 border-radius: (左上和左下) (右上和右下)*/
.box3 {
border-radius: 50px 20px;
/*给一个的就是全部都一样border-radius: all*/
}
.box4 {
/*border-top-left-radius:左上*/
border-top-left-radius: 20px;
/*border-top-right-radius: 右上*/
border-top-right-radius:50px;
/*border-bottom-right-radius: 右下*/
border-bottom-right-radius: 10px;
/*border-bottom-left-radius: 左下*/
border-bottom-left-radius: 40px;
/*////////////////////////////////*/
/*border-top-radius: 只写一边这样不可以哦*/
} .box5 {
/*box-shadow: 颜色 水平位移 垂直位移 模糊半径*/
/*水平位移和垂直位移的取值范围:-10px ~~ 10px
* 模糊半径的取值范围:0~~20px
*/
box-shadow: #ccc 10px 10px 5px;
} </style>
</head>
<body>
<div class="top box1"></div>
<div class="top box2"></div>
<div class="top box3"></div>
<div class="bottom box4"></div>
<div class="bottom box5"></div>
<div class="bottom box6">参照的盒子</div>
</body>
</html>


  

css3边框属性学习的更多相关文章

  1. CSS3 content属性学习

    css3中出现了 ":before",":after"伪类, 你可以这样写: h1:after{ content:'h1后插入的文本'; ... } 这两个选择 ...

  2. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  3. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  4. HTML 学习笔记 CSS3 (边框)

    CSS3边框 通过CSS3边框 你能够创建远角边框 向矩形边框添加阴影 使用图片来绘制边框 . CSS3的边框属性 主要包含以下几种 border-radius 边框圆角 box-shadow 边框阴 ...

  5. css3新属性的学习使用

    display 可选值:none隐藏元素: block显示为块级元素: inline显示为行级元素 inlineblock显示为内联块级元素,本身将是一个行级元素,但是拥有 块级元素的所有属性,比如宽 ...

  6. CSS3的新增边框属性

    一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...

  7. web前端学习(三)css学习笔记部分(8)-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  8. css3设置边框属性

    css设置边框属性:设置边框圆角 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

  9. 第八十节,CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释     CSS3 ...

  10. CSS3基础(4)——CSS3 渲染属性

    一. CSS3 计数器详解    CSS3计数器(CSS Counters)可以允许我们使用CSS对页面中的任意元素进行计数,实现类似于有序列表的功能. 与有序列表相比,它的突出特性在于可以对任意元素 ...

随机推荐

  1. (0821) git 下拉code不稳

    (1)红帽粘贴  vncconfig & (2)csh不稳定 解决办法: bash eval "$(ssh-agent -s)" ssh-add git pull 或者 g ...

  2. (未完成)JAVAWEB学习——

    一.Servlet开发 1.sun公司提供的一种动态web资源开发技术,本质上就要是一段Java小程序,可以将Servlet加入到容器中运行Servlet. *servlet容器 -- 能够运行ser ...

  3. python对文件的处理方法

    #1.打开文件 如果文件不存在会报错 file = open("1.txt") #2.使用w.w+.a.a+模式打开,如果文件不存在就创建文件 file = open(" ...

  4. OnMicro BLE应用方案|蓝牙语音遥控器-OM6621E

    随着物联网技术不断发展,家用电器往智能化方向持续迭代,使用红外遥控器这种传统的互动方式已经满足不了实际的使用需求,蓝牙语音遥控器作为人机交互新载体,逐渐取代传统红外遥控器成为家居设备的标配. 相比于传 ...

  5. 记录web面经

    1. npm版本号含义 例如: 2.3.1 (分别表示: 大版本,小版本, 补丁版本)大版本号: 大版本更新,功能添加,向下不兼容.小版本号:功能新增,向下兼容.补丁版本号: 修复bug.~符号含义: ...

  6. jdbc封装工具类(连接池)

    c3p0配置文件: c3p0-config.xml <c3p0-config> <!-- 使用默认的配置读取连接池对象 --> <default-config> & ...

  7. SDIO接口WIFI&BT之相关常备知识

    SDIO接口WIFI&BT之相关常备知识 <VBAT>:>Main Power Voltage Soure Input      主电源输入(SDIO WIFI目前知道的都是 ...

  8. OpenMP fortran 学习

    参考自TAMU的PPThttps://people.math.umass.edu/~johnston/PHI_WG_2014/OpenMPSlides_tamu_sc.pdf 什么是OpenMP 在C ...

  9. 【小记】如果 golang 内存不够了怎么办

    在看 redis 1.0 源码时,总会看到需要申请内存的地方,如果申请不到需要大的内存就会返回 NULL,然后在调用层抛出 oom. 比如 listDup 中在复制特殊 value 或者加入新节点时都 ...

  10. 部分jdk网盘链接

    链接:https://pan.baidu.com/s/1Nw84qVRL3Buarh2LY1lWEg 提取码:6q2z 含 6u45 7u80 8u202 11.0.X 的win及linux版 没有网 ...