border边框属性的拆开方式 border按三要素来拆开 border按方向来拆开

border是一个大综合属性，

border:1px solid red;

border属性能够被拆开，有两大种拆开的方式：

1）按3要素:border-width、border-style、border-color

2）按方向：border-top、border-right、border-bottom、border-left

1、按三要素拆开
<style>/* 把边框border按3要素拆开 */.box{width: 300px;height: 300px;/* 边框3要素:border-width、border-style、border-color *//* border-width: 10px; *//* border-style: dotted; *//* border-color: pink; *//* 上下10  左右20 *//* 按3要素拆开: */border-width: 10px 20px;border-style: solid dashed dotted;border-color: pink green orange blue;}</style>
</head>
<body><div class="box"></div>
</body>2、按方向拆开<style>/* 把边框border按方向来拆开 */ .box{width: 300px;height: 300px;/* 按方向来拆开 */border-top: 30px solid red;border-right: 30px solid green;border-bottom: 30px solid blue;border-left: 30px splid pink;}</style>
</head>
<body><div class="box"></div>

预览：

1、三要素：

2、方向拆开：

border边框属性的拆开方式 border按三要素来拆开 border按方向来拆开相关推荐

CSS的border边框属性边框样式内外边框圆角合集
CSS border 属性允许指定元素边框的样式.宽度和颜色. 目录 1.四个边框 2.内外边框 3.边框样式 4.圆角边框 1.border边框属性可以设置一到四个值(上边框,右边框,下边框,左边 ...
html边框复合属性,详解CSS的border边框属性及其在CSS3中的新特性
基础你可能很熟悉边的最基本用法. CSS Code复制内容到剪贴板 border:1pxsolidblack; 上面的代码将给元素应用1px的边.即简洁又简单:但我们也可以稍作修改. CSS Code ...
html正方形边框，详解HTML设置边框的三种方式（html画方框用border）
代码如下 <!DOCTYPE html> <html> <head> <style> .square{ ...
html 折线边框,HTML中的边框属性
可以通过边框风格属性border-style设定上下左右边框的风格,该属性用于设置一个元素边框的样式,而且必须用于指定可见的边框.可以使用1到4个关键字,如果四个值都给出了,它们分别用于上.右.下和左 ...
java border边框_简单实用的css边框属性border
本文主要讲述利用border属性做出不同的几何形状从而适用于比较好看的视觉样式. 预备知识 border相关属性 border-width 边框的宽度 border-style 边框的样式 borde ...
CSS-12.css边框属性（border）
在盒子模型中我们通常会给盒子设置边框属性,使之完成某些功能和样式我们会使用css中的border属性来设置边框一般会通过连写来设置border,他下面还有width,style,color的属性, ...
html--盒子的边框属性（border）
content:内容框(我们设置的宽高是内容框的宽高) padding:内边距 top right bottom left(四边--一般默认指定的方向) border:边框线包裹了内边距(四边) ...
css ---border边框语法
一.四个边框 border-left 设置左边框,一般单独设置左边框样式使用 border-right 设置右边框,一般单独设置右边框样式使用 border-top 设置上边框,一般单独设置上边框样式 ...
css样式三种引入方式选择器常用属性：背景属性字体属性边框属性内间距外间距盒子模型
一.CSS简介 1.什么是css 重叠样式表主要是负责标签的样式美化页面一个网页分三大部分结构层: 主要由html负责负责页面的结构表现层: 主要由css负责页面的展示样式美化页面行 ...
继承性和层叠性权重盒模型 padding(内边距) border(边框) margin 标准文档流块级元素和行内元素...
内容总结: 1.继承性和层叠性继承性: 像一些文本的属性: color,text-*,line-*,font-* 这些属性是可以继承下来的2.层叠性就是权重 ,谁的权重大就显示谁的属性如何看权重:就 ...

border边框属性的拆开方式 border按三要素来拆开 border按方向来拆开

border边框属性的拆开方式 border按三要素来拆开 border按方向来拆开相关推荐

最新文章

热门文章