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. jemter  分布式压测
			
    1.测试机搭建 首选 压力机A,压力机B,压力机C, 压力机A作为控制台 压力机B,压力机C作为分布式的测试机 压力机Aip:172.16.23.69, 压力机Bip:192.168.184.128  ...
    
			
    2. 
						
  2. Python学习的第四次总结
			
    修改文件内某行内容 f_read = open('文件名','r',encoding='utf-8')f_write = open('文件名1','w',encoding='utf-8')number ...
    
			
    3. 
						
  3. Jmeter学习：字符串，加密相关函数，groovy脚本函数
			
    一.__digest 功能介绍: 将输入进行 MD5 加密 ${__MD5(参数 1,参数 2)} 参数 1:加密算法,必选,MD2 MD5 SHA-1 SHA-224 SHA-256 SHA-384 ...
    
			
    4. 
						
  4. RabbitMQ管理界面使用之手动送数据
			
    目录 1. 找到相应的队列, 点击进入详情 2. 找到Publish Message项,填写自定义数据 3. 发送数据 4. 发送成功 5. 接收 1. 找到相应的队列, 点击进入详情 2. 找到Pu ...
    
			
    5. 
						
  5. 网络负载均衡LVS
			
    目录 集群负载均衡 一.网络协议原理 1.1 七层模型 什么是协议 1.2 五层模型 1.3 TCP协议 面向连接 表头参数缓存验证 Recv-Q/Send-Q 四元组 TCP三次握手 验证 TCP四 ...
    
			
    6. 
						
  6. 直接使用Arrays.asList()转数组，转变类型实际为AbstractList
			
    1.直接将数组转换为list时List的类型为AbstractList public static void main(String[] args) { String[] arr = {"A ...
    
			
    7. 
						
  7. UE4常用快捷键
			
    编辑器快捷键 按键 操作 W 选择"移动"工具 E 选择"旋转"工具 R 选择"缩放"工具 F 聚焦对象 End 落到地面 Alt + En ...
    
			
    8. 
						
  8. 【Windows】Microsoft Store 应用列表
			
    更新优质微软商店应用: 『购买 WSA工具箱 - Microsoft Store zh-CN』 『购买 Apk安卓安装器 - Microsoft Store zh-CN』 『购买 KMS激活: Win ...
    
			
    9. 
						
  9. 必备技能，MySQL 查找并删除重复行
			
    本文讲述如何查找数据库里重复的行.这是初学者十分普遍遇到的问题.方法也很简单.这个问题还可以有其他演变,例如,如何查找"两字段重复的行"(#mysql IRC 频道问到的问题) 如 ...
    
			
    10. 
						
  10. 微信退款报错 400 the ssl certificatie error / no required SSL certificate was sent  ; Guzzle json_encode Type is not supported;
			
    bug随笔 一 起因. 在做一个点餐类小程序,本地测试ok.上测试的时候,突然就报错,微信退款失败. 二 Debug. 1. Debug trace到页面直接显示的是 : Type is not su ...
    
			
    11.