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. 
						
  2. 高效开发之SASS篇     灵异留白事件——图片下方无故留白    你会用::before、::after吗    link 与 @import之对比    学习前端前必知的——HTTP协议详解    深入了解——CSS3新增属性    菜鸟进阶——grunt   $(#form :input)与$(#form input)的区别
		
    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...
    
		
    3. 
						
  3. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
		
    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
    
		
    4. 
						
  4. HTML 学习笔记 CSS3 (边框)
		
    CSS3边框 通过CSS3边框 你能够创建远角边框 向矩形边框添加阴影 使用图片来绘制边框 . CSS3的边框属性 主要包含以下几种 border-radius 边框圆角 box-shadow 边框阴 ...
    
		
    5. 
						
  5. css3新属性的学习使用
		
    display 可选值:none隐藏元素: block显示为块级元素: inline显示为行级元素 inlineblock显示为内联块级元素,本身将是一个行级元素,但是拥有 块级元素的所有属性,比如宽 ...
    
		
    6. 
						
  6. CSS3的新增边框属性
		
    一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...
    
		
    7. 
						
  7. web前端学习（三）css学习笔记部分（8）-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触
		
    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...
    
		
    8. 
						
  8. css3设置边框属性
		
    css设置边框属性:设置边框圆角 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...
    
		
    9. 
						
  9. 第八十节，CSS3边框图片效果
		
    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3 ...
    
		
    10. 
						
  10. CSS3基础(4)——CSS3 渲染属性
		
    一. CSS3 计数器详解    CSS3计数器(CSS Counters)可以允许我们使用CSS对页面中的任意元素进行计数,实现类似于有序列表的功能. 与有序列表相比,它的突出特性在于可以对任意元素 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. Linux学习 --- 系统网络配置
			
    前言 : 如果一台计算机想接入互联网,必须配置好IP地址,子网掩码,网关,DNS服务器.在Linux系统中,这些信息都可以修改对应的配置文件来进行配置.临时配置一下网络可以使用一些简单的命令来进行配置 ...
    
			
    2. 
						
  2. 【键盘快捷键】Super键
			
    键盘快捷键 Super键 Windows/方框键.它有时也会被称为 Windows 键,徽标键或系统键 打开任务管理器 Ctrl+Shift+Esc
    
			
    3. 
						
  3. GO 语言中的 sync Map
			
    为什么需要 sync map go 语言之所以引入 sync.Map主要是因为GO 语言自带的 map 是线程不安全的.只能保证并发的读,但是不能保证并发的写. 看下面的例子: func main() ...
    
			
    4. 
						
  4. 梦想云图Node.JS服务 （网页CAD，在线CAD ）
			
    说明 后台提供梦想Node.JS服务,方便调用控件后台功能,Windows服务程序所在目录:Bin\MxDrawServer\Windows,Linux服务程序所在目录:Bin\Linux\MxDra ...
    
			
    5. 
						
  5. C语言学习记录（一）
			
    C语言学习记录(一) 一.知识要点(程序设计概述) 1.程序与程序设计语言 概念:程序就是给计算机下一系列指令,使其完成任务.而编写这些指令就是程序设计. 程序设计语言 第一代程序设计语言(1GL): ...
    
			
    6. 
						
  6. CAD专用卸载工具，完美彻底卸载清除干净cad各种残留注册表和文件。
			
    CAD专用卸载工具,完美彻底卸载清除干净cad各种残留注册表和文件.有的同学由于一些原因想把cad卸载掉然后重新安装,但是cad安装到一半就失败了或者显示已安装或者未完成,还有的同学会遇到" ...
    
			
    7. 
						
  7. NDK 减少 so 库体积方法总结
			
    . 使用 strip 使用 NDK toolchain 可以把调试的 C++ 符号表(Symbol Table)中数据删除,我们一般我们打成 APK 会自动帮我们做这个工作,当然也可以手动设置: 手动 ...
    
			
    8. 
						
  8. 疾速瓜牛 Linux三剑客 之 sed学习与应用
			
    sed, 是stream editor的缩写,顾名思义,就是个非交互式行编辑器,有以下特点: 它能执行与编辑器 vi 和 ex 相同的编辑任务 sed 编辑器没有提供交互式使用方式,使用者只能在命令行 ...
    
			
    9. 
						
  9. uniapp for显示数据改变时，绑定的list值同时改变
			
    <template> <view class="container"> <uni-table> <uni-tr v-for="( ...
    
			
    10. 
						
  10. pycharm永久激活码（亲测好用）
			
    引用自某不知名大佬,在此致谢,获取激活码链接如下: https://www.ajihuo.com/pycharm/4197.html
    
			
    11.