当前位置:首页 > 前端技术 > css盒子模型之边框宽度,边框颜色与边框样式

css盒子模型之边框宽度,边框颜色与边框样式

2022年09月17日 08:31:17前端技术8
/*
    width和height只是设置盒子内容区的大小,而不是盒子的整个大小,
    盒子可见框的大小由内容区,内边距和边框共同决定。
 */
.box1 {
    /* 设置内容区的宽度为400px */
    width: 400px;
    /* 设置内容区的高度为400px */
    height: 400px;
    /* 设置内容区的背景色为green */
    background-color: blueviolet;
    /* 设置该盒子模型的下方外边距为10px */
    margin: 0px 0px 10px;
}

css盒子模型之边框宽度,边框颜色与边框样式 _ JavaClub全栈架构师技术笔记

css盒子模型之边框宽度,边框颜色与边框样式 _ JavaClub全栈架构师技术笔记

/*
    为元素设置边框必须指定三个样式属性:
        border-width 表示边框宽度
        border-color 表示边框颜色
        border-style 表示边框样式
 */
.box2 {
    /* 设置边框的宽度为10px,使用border-width可以指定四个边框的宽度,
       如果border-width后面跟一个值,则设置的是上,右,下,左(按照顺时针方向)边框的宽度都是该值(四个宽度都一样);
       如果border-width后面跟两个值,则分别设置的是上下,左右边框的宽度;
       如果border-width后面跟三个值,则分别设置的是上,左右,下边框的宽度;
       如果border-width后面跟四个值,则分别设置的是上,右,下,左边框的宽度;
       本例中只设置一个值,表示四个边框的宽度都是10px。
     */
    border-width: 10px;
    /* 设置边框的颜色为red,使用border-color可以指定四个边框的颜色,设置规则与border-width相同,
       本例中只设置一个值,表示四个边框的颜色都是red。
     */
    border-color: red;
    /* 设置边框的样式为solid,使用border-style可以指定四个边框的样式,设置规则与border-width相同,
       border-style常用的值有none(默认无边框),solid(实线),dotted(点状),dashed(虚线),double(双线)等等,
       本例中只设置一个值,表示四个边框的样式都是solid。
     */
    border-style: solid;
}

css盒子模型之边框宽度,边框颜色与边框样式 _ JavaClub全栈架构师技术笔记

.box3 {
    /* 设置上下边框宽度为10px,左右边框宽度为20px */
    border-width: 10px 20px;
    /* 设置上下边框颜色为red,左右边框颜色为green */
    border-color: red green;
    /* 设置上下边框样式为solid,左右边框样式为dotted */
    border-style: solid dotted;
}

css盒子模型之边框宽度,边框颜色与边框样式 _ JavaClub全栈架构师技术笔记

.box4 {
    /* 设置上边框宽度为10px,左右边框宽度为20px,下边框宽度为30px */
    border-width: 10px 20px 30px;
    /* 设置上边框颜色为red,左右边框颜色为green,下边框颜色为yellow */
    border-color: red green yellow;
    /* 设置上边框样式为solid,左右边框样式为dotted,下边框样式为dashed */
    border-style: solid dotted dashed;
}

css盒子模型之边框宽度,边框颜色与边框样式 _ JavaClub全栈架构师技术笔记

.box5 {
    /* 设置上,右,下,左边框的宽度分别是10px,20px,30px,40px */
    border-width: 10px 20px 30px 40px;
    /* 设置上,右,下,左边框的颜色分别是red,green,yellow,blue */
    border-color: red green yellow blue;
    /* 设置上,右,下,左边框的样式分别是solid,dotted,dashed,double */
    border-style: solid dotted dashed double;
}

css盒子模型之边框宽度,边框颜色与边框样式 _ JavaClub全栈架构师技术笔记

<!-- html代码 -->
<div class="box1"></div>
<div class="box1 box2"></div>
<div class="box1 box3"></div>
<div class="box1 box4"></div>
<div class="box1 box5"></div>

查看源代码

作者:勾践
来源链接:https://www.cnblogs.com/goujian/p/11978796.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42364.html

标签: css
分享给朋友:

“css盒子模型之边框宽度,边框颜色与边框样式” 的相关文章

如何使用纯 CSS 创建翻牌动画

如何使用纯 CSS 创建翻牌动画

下面的示例向您展示了如何使用纯 CSS 创建翻牌动画。 作者:坚果 公众号:“大前端之旅” 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括F...

浏览器对css 伪类 hover的支持

浏览器对css 伪类 hover的支持

今天在调试的时候,发现用hover写的样式在火狐上可以,在ie上却不行,百度了下,原来我用的是ie的Quirks模式。 这是在http://www.w3help.org网站上查到的结果。 问题描述 IE6 IE7(Q) IE8(Q) 不支持 A 元素以外的其他元素的...

scrapy css选择器提取a标签内href属性值

 示例Html: <div class='abc'> <a href='https://blog.csdn.net/weixin_41767339'> Hello word! </a> </div&...

VSCode代码自动补全(html标签、style样式、css属性及值)

VSCode代码自动补全(html标签、style样式、css属性及值、),修改配置文件即可完成! 操作环境 1. 系统window 10 2. 软件VS code 2019汉化 1.按CTRL+SHIFT+P 2.输入搜索Su...

HTML标签自带属性 和 CSS 常用属性区分

**前言:**相信很多人在开发时都遇到过这样一个问题,当我们需要用一个属性去修饰某个标签时,常常会分不清楚其到底是标签自带的属性(HTML属性)还是 CSS 里的属性,因此这篇博文记录的就是一些常用的 HTML 和 CSS 属性,方便查阅的同时,也希望和...

css中的@media用法总结

1、head标签中引入 //语法: @media mediatype and | not | only (media feature) { css-code; } //也可以针对不同的媒体使用不同的stylesheets: <!--<link rel="st...

CSS

CSS

文章目录 1. CSS 的概念 2. CSS 的作用 3. CSS 与 HTML 的结合方式 4. CSS 格式 5. 选择器 5.1 选择器的作用...

CSS将img图片填满父容器div,自适应容器大小

当一个页面中引入多张图片时候,会碰到图片尺寸不一致,单要求显示成一致的大小,我们直接设置图片尺寸会导致图片变形,这就是我们遇到的问题,看下解决方法: <div> <img src="引入的图片地址" alt=""> </div&...

HTML&CSS实验(5)---学习颜色、字体、文本格式化和盒模型的样式定义

HTML&CSS实验(5)---学习颜色、字体、文本格式化和盒模型的样式定义

  【实验题目】HTML&CSS实验(5) 【实验目的】学习颜色、字体、文本格式化和盒模型的样式定义。                  ----------------------个人作业,如果有后辈的作业习题一致,可以参考学习,一起交流...

CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 水平居中 1、行内元素 行内元素(主要是表现为文字,图片等行内元素)...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。