CSS3笔记之基础篇（一）边框

效果一、圆角效果 border-radius

实心上半圆：

方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。

div {height:50px;/*是width的一半*/width:100px;background:#9da;border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
}

实心圆：
方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码：

div {height:100px;/*与width设置一致*/width:100px;background:#9da;border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}

效果二、阴影 box-shadow

box-shadow是向盒子添加阴影，可以添加一个或者多个，具体的语法为：

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径][阴影扩展半径][阴影颜色][投影方式]

其中

X轴偏移量：必需，水平阴影的位置。允许负值

Y轴便宜量：必需，垂直阴影的位置。允许负值

阴影模糊半径：可选，模糊距离，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊

阴影扩展半径：可选，阴影的尺寸，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

阴影颜色：可选，省略默认为黑色

投影方式：可选，省略为外阴影方式，设置inset为内部阴影方式

效果三、边框图片border-image

根据border-image的语法，如图

其中：repeat就是一直重复，然后超出部分剪裁掉，而且是居中开始重复

round可以理解为圆满的铺满，图片不会被裁剪，为了实现圆满所以会压缩（或拉伸）

stretch就是拉伸，有多长拉多长，让图片拉伸成对应边框的长度

注意：Chrome下，中间部分也会被拉伸，webkit浏览器对于round属性和repeat属性似乎没有区分，显示效果是一样的。

CSS3笔记之基础篇（一）边框相关推荐

CSS3笔记之基础篇（二）颜色和渐变色彩
效果一.颜色之RGBA RGB是一种色彩标准,是由红(R).绿(G).蓝(B)的变化以及相互叠加来得到各式各样的颜色.RGBA是在RGB的基础上增加了控制alpha透明度的参数. 语法: color: ...
CSS3笔记之基础篇（三）文字与字体
要点一.text-overflow与word-wrap text-overflow:设置是否使用一个省略标记(...)标示对象内文本的溢出. word-wrap:设置文本行为,当前行超过指定容器的边界 ...
《算法笔记》——基础篇习题选择结构
<算法笔记>--基础篇习题第二章 C/C++快速入门--2.3选择结构 [习题A] 一元二次方程求根 Problem Description Thinking Notes Code Im ...
深度学习word2vec笔记之基础篇
深度学习word2vec笔记之基础篇声明: 1)该博文是多位博主以及多位文档资料的主人所无私奉献的论文资料整理的.具体引用的资料请看参考文献.具体的版本声明也参考原文献 2)本文仅供学术交流,非商用 ...
jqGrid 学习笔记整理——基础篇
jqGrid 学习笔记整理--基础篇 jqGrid 实例中文版网址:http://blog.mn886.net/jqGrid/ 国外官网:http://www.trirand.com/blog/ 本人 ...
极客时间 Redis核心技术与实战笔记（基础篇）
Redis 概览 Redis 知识全景图 Redis 问题画像图基础篇基本架构数据结构数据类型和底层数据结构映射关系全局哈希表链式哈希解决哈希冲突渐进式 rehash 不同数据结构查找操 ...
Java学习笔记之基础篇
Java学习笔记之基础篇目录 Java如何体现平台的无关性? 面向对象(OO)的理解面向对象和面向过程编程的区别面向对象三大特征静态绑定和动态绑定(后期绑定) 延伸:类之间的关系组合(聚合) ...
Excel学习笔记之基础篇
记录一下跟着网易云课堂大饼老师Excel课程学习的笔记,只能起一个大纲的作用吧,用来练习的数据表不方便上传,也懒得截图录屏做成GIF操作啥的.课程共分为基础篇,进阶篇之函数,进阶篇之数据透视,进阶篇之 ...
CSS阅读笔记---CSS基础篇
本文是这些天阅读慕课网的css基础篇部分所作的笔记. 文章目录一.基本知识二.选择器 1.标签选择器 2.类选择器 3.ID选择器 4.子选择器 5.包含(后代)选择器 6.通用选择器 7.伪类选 ...

CSS3笔记之基础篇（一）边框

CSS3笔记之基础篇（一）边框相关推荐

最新文章

热门文章