文档章节

CSS--边框

wytao1995
 wytao1995
发布于 09/16 01:22
字数 520
阅读 7
收藏 0

一、溢出

当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出

横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽

属性:overflow/overflow-x/overflow-y

取值:

    1、visiable:默认值,溢出可见

    2、hidden:溢出部分隐藏

    3、scroll:显示滚动条,不管是否溢出都显示滚动条,只有在溢出时,滚动条才可用

    4、auto:自动,溢出方向有滚动条,没溢出方向没有滚动条

二、边框

1、四边简写

属性:border:width style color

width:边框宽度

style:边框的样式

    取值:

        solid:实线

        dotted:圆点虚线

        dashed:线状虚线

        double:双实线

color:边框颜色,合法的颜色值,支持透明色(transparent)

border直接设置上下左右4个方向的边框

取消边框:border:none/0

2、单边定义

border-top

border-right

border-bottom

border-left

3、单属性定义

border-width

border-style

border-color

4、单边单属性定义12个

border-top-width

4变x3个属性=12个

5、边框的倒角

把直角变成圆角

border-radius

取值:

    (1)以px为单位的数字

    (2)%   50%为圆形

单角设置:先写上下,再写左右

border-top-left-radius

border-top-right-radius

border-bottom-left-radius

border-bottom-right-radius

6、边框的阴影

box-shadow

取值:h-shadow v-shadow blur spread color  inset

    h-shadow:水平方向阴影的偏移,正值往右,负值往左

    v-shadow:垂直方向阴影的偏移,正值往下,负值往上

    blur:影音迷糊距离,越大越模糊,负值就消失

    spread:影印尺寸,指阴影在基础上扩出来的距离

    color:颜色

    inset:将默认的外部阴影变为内部阴影

7、边框的轮廓

边框的边框,绘制与边框外边的线条

outline:width style color

给input边框去掉轮廓:outline:none/0;

 

 

© 著作权归作者所有

上一篇: CSS盒子模型
下一篇: css--尺寸
wytao1995
粉丝 1
博文 53
码字总数 33926
作品 0
六安
私信 提问
CSS3 边框(Borders)

CSS3 Borders 用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop。 在本章中,您将了解以下的边框属性: border-radius box-shadow border-image 浏览...

wybo521
2016/01/23
47
0
css三角形原理

前言:   在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对...

羊皮卷
2016/12/13
22
0
CSS(一) CSS背景

CSS背景 ---------- 既有css3之前的用法也有css3的用法,没有区分出来哈,我想要速成就没有管这个。 CSS设置背景颜色:属性background-color,这个属性的作用范围是,background-color 属性为...

年少爱追梦
2016/06/08
80
0
offsetTop、offsetLeft 算法

在元素 A 上调用 offsetTop 属性时,必须按以下算法返回结果值: 如果元素 A 是 HTML 的 body 元素,其 display 属性计算值是 none,或者不具有 CSS 布局盒子,则返回 0,并停止本算法。 如果...

刘赤龙
2010/06/08
65
0
巧用CSS的Border属性

。 作者:冯永曜 来源:黄山村夫 制作过网页的人都有为画线而烦恼的经历,本文介绍的小技巧也许对你有所帮助。我们先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范...

晨曦之光
2012/03/09
99
0

没有更多内容

加载失败,请刷新页面

加载更多

Kylin构建Cube过程详解

1 前言 在使用Kylin的时候,最重要的一步就是创建cube的模型定义,即指定度量和维度以及一些附加信息,然后对cube进行build,当然我们也可以根据原始表中的某一个string字段(这个字段的格式...

大数据技术进阶
3分钟前
1
0
Git保存密码

保存密码 $ git config --global credential.helper store 参数 --global 设置全局,如果用 --local 则只设置当前库 要注意保存时是用明文保存的,所以不要在公用电脑使用...

编程老陆
4分钟前
1
0
ofcms 说明文档

一、模板说明 项目概述 java 版CMS系统、基于java技术研发的内容管理系统、功能:栏目模板自定义、内容模型自定义、多个站点管理、在线模板页面编辑等功能、代码完全开源、MIT授权协议。 技术...

kuchawyz
11分钟前
2
0
理解CSS相对定位和固定定位

本文转载于:专业的前端网站➦理解CSS相对定位和固定定位 前面的话   一般地,说起定位元素是指position不为static的元素,包括relative、absolute和fixed。前面已经详细介绍过absolute绝对...

前端老手
21分钟前
2
0
iOS Xcode升级包地址(感谢大神)

下载地址:DeviceSupport

_____1____
35分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部