CSS之布局（轮廓和圆角）

轮廓和圆角：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>轮廓和圆角</title><style>.box1{width: 200px;height: 200px;background-color: #BBFFAA;/*box-shadow用来设置元素的的阴影效果，阴影不会影响页面布局*//*第一个值：水平偏移量（相当于margin-left）；第二个值：垂直偏移量；第三个值：阴影的模糊半径第四个值：阴影颜色*/box-shadow: 10px 7px 30px rgba(0,0,0,0.3);/*outline 用来设置元素的轮廓线，用法和border一模一样轮廓和边框不同的点，就是轮廓不会影响到可见框的大小*/}.box1:hover{outline: 10px red solid;}.box2{width: 200px;height: 200px;background-color: orange;/*border-radius: ;用来设置圆角四个值：左上 右上 右下 左下三个值：左上  右上/左下   右下两个值：左上/右下  右上/左下*//*x      yborder-top-left-radiusborder-top-right-radius*/border-radius: 50px / 20px;}.box3{width: 200px;height: 200px;background-color: rosybrown;/*将元素设置为一个圆形*/border-radius: 50%;}</style></head><body><div class="box1"></div><span>hello</span><div class="box2"></div><br /><div class="box3"></div></body>
</html>

CSS之布局（轮廓和圆角）相关推荐

IE和Firefox浏览器CSS网页布局不同点
CSS网页布局,最令大家头疼的问题就是浏览器兼容性,虽然webjx.com介绍过很多这方向的知识,但依然让很多开发人员晕头转向,今天的这篇文章,将列出css和javascript在IE和Firefo ...
CSS页面布局（超详解）
目录 1 CSS页面布局概述 1.1 概述 1.2 网页栏目划分 1.3 元素类型转化 1.3.1 块元素 1.3.2 行内元素 1.3.2 块元素和行内元素的转换 1.4 定位 1.4.1 静态定位 ...
css 网格布局_我从CSS网格布局中学到的东西
css 网格布局 by Jennifer Wjertzoch 珍妮弗·维佐奇我从CSS网格布局中学到的东西 (Things I've learned about CSS grid layout) W ...
用css网站布局之十步实录～
http://www.52css.com/article.asp?id=179 用css网站布局之十步实录! 第五步:网页主要框架之外的附加结构的布局与表现理论上,我们可以控制源文件上的任意元素的浮 ...
css Table布局：基于display:table的CSS布局
两种类型的表格布局你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...
css网页布局中文字排版的属性和用法
前段时间,学习了几个大的网站的图文混排的方法.今天总结下, css网页布局中文字排版的相关属性以及用法 .包括:设定字体.颜色.大小.段落空白,首字下沉.首行缩进.中文字的截断.固定宽度词内折行(wo ...
Float构建三栏DIV CSS网页布局
你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...
带你入门 CSS Grid 布局
前言三月中旬的时候,有一个对于 CSS 开发者来说很重要的消息,最新版的 Firefox 和 Chrome 已经正式支 CSS Grid 这一新特性啦.没错:我们现在就可以在最流行的两大浏览器上玩转 ...
css搜索框变圆脸角,CSS浮动布局
CSS浮动布局浮动布局浮动是CSS布局中经常使用的一种手段,其实说白了就是使元素进行漂浮脱离正常的文档流排列机制,实现一堆原本的block状态的标签可以并排显示,当然这也可以使用display:i ...

CSS之布局（轮廓和圆角）

轮廓和圆角：

CSS之布局（轮廓和圆角）相关推荐

最新文章

热门文章