css3加内边框的方法:可以通过使用border属性和box-sizing属性来加内边框,如【box-sizing:border-box;】。box-sizing属性允许以某种方式定义某些属性,以适应指定区域。

本教程操作环境:windows7系统、css3版,该方法适用于所有品牌电脑。

css3添加内边框

相关属性:

border属性允许你指定一个元素边框的样式和颜色。

box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域。

(学习视频分享:css视频教程)

语法:box-sizing: content-box|border-box|inherit:

属性值:content-box 这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外

border-box 指定宽度和高度(最小/最大属性)确定元素边框。也就是说,对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit 指定 box-sizing 属性的值,应该从父元素继承

代码实现:

div.container

{

width:30em;

border:1em solid;

}

div.box

{

box-sizing:border-box;

-moz-box-sizing:border-box; /* Firefox */

width:50%;

border:1em solid red;

float:left;

}

这个 div 占据了左边的一半。
这个 div 占据了右边的一半。

实现效果:

相关推荐:CSS教程

html5加内边框,css3怎么加内边框相关推荐

  1. html锯齿边框,css3制作邮票(锯齿边框)-css3制作邮票(锯齿边框)-HTML5+CSS3-编玩编学- 注重积累的过程 快速锁定问题解决问题 写博客,在积累源码,持续更新技术博客,加分项...

    css3制作邮票(锯齿边框) html: css: body,h1,h2,h3,h4,ul,li,div,a,p{ margin: 0; padding: 0; font-family: arial; ...

  2. 内嵌WEB服务器加载原理

    内嵌WEB服务器加载原理 理解里面的tomcat是如何启动的 Startup.bat Server.start() 1,概述 我们在使用springboot项目的时候并没有使用外部的tomcat,那么 ...

  3. Tomcat - 模拟Tomcat的webappClassLoader加载自己war包应用内不同版本类实现相互共存与隔离

    文章目录 Pre Tomcat要解决什么问题? Tomcat违反了双亲委派机制? 模拟Tomcat的webappClassLoader加载自己war包应用内不同版本类实现相互共存与隔离 Tomcat加 ...

  4. android8.0内置壁纸,一加手机8pro内置壁纸分享

    Hi~雷迪森and乡亲们~~ 今天分享的壁纸来自于 一加8pro手机,这款手机是酱紫的~ 手机内置原生壁纸显示质量非常好,高清分辨率,画面与色彩也很漂亮~ 无水印超清手机壁纸,你值得去用它~~ 一加8 ...

  5. html中加一个边框,用HTML代码制作边框(上)

    效果 这是一个单层边框代码,边框颜色是湖蓝色(#8ee5ee),边框厚度值为"5"宽度为600,通过对边框宽度.颜色和边框厚度的设置可获得不同的边框.例如想把上面的边框制作成红色, ...

  6. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

  7. php为图片添加渐变背景,HTML_CSS实例:通过定义渐变边框给图片加阴影,一般我们可以使用背景图的方 - phpStudy...

    CSS实例:通过定义渐变边框给图片加阴影 一般我们可以使用背景图的方式给图片添加阴影,但对于不固定尺寸的图片如何实现呢? 我们可以采取"视觉欺骗大法"--定义渐变边框来实现 代码: ...

  8. html换行添加前缀,为什么使用css3要加前缀?

    CSS3的语法是建立在CSS原先版本基础上的,它允许使用者在标签中指定特定的HTML元素而不必使用多余的class.ID或JavaScript. 使用css3要加前缀的原因: 因为css3很多属性还没 ...

  9. 如何给照片加边框?图片加边框的3个实用方法

    分享3个良心好用的照片加相框工具,个个都是操作简单,还提供了丰富好看的边框模板,瞬间让照片变得有质感,大家可以根据自己的需求选择对应的工具进行添加. 1.改图鸭 一个免费的图片处理网站,提供几十种图片 ...

最新文章

  1. spring aop代码的增强
  2. 万字长文带你一览ICLR2020最新Transformers进展(下)
  3. lm723大电流可调电源电路图_TE:大电流电源连接器
  4. python笔试题 github_简单的python面试题,居然
  5. [UOJ22]外星人
  6. 如何让 Mac 加入网络帐户服务器?
  7. 灵敏度和稳定性能兼具 新气体传感器技术适用于工业应用
  8. 基于Python的医院信息管理系统的设计与实现
  9. SQL三个表关联查询
  10. 【Android】 使用AndServer框架在手机上搭建服务器
  11. 2020年中国无缝钢管行业发展现状及竞争格局分析,天津钢管产量领先,居国内首位「图」
  12. (六)JAVA设计模式23种设计模式之适配器模式实例demo
  13. Camera HAL3学习
  14. MySQL数据查询之多表查询
  15. 对硬盘操作的API介绍以及应用测试
  16. 5G通信芯片发展与零售新机遇
  17. Android高手笔记-屏幕适配 UI优化
  18. win7声卡驱动安装失败(不能安装)完美解决方法
  19. 使用AngularJS的自适应网站
  20. 智能网卡相关知识(smart nic 、DPU)

热门文章

  1. cgcs2000高斯平面直角坐标_如何巧妙记忆高斯积分
  2. ROS2机器人笔记20-09-24
  3. 解题-->在线OJ(七)
  4. db2 load 快速_使用 DB2 的 LOAD FROM CURSOR 特性快速轻松地转移数据
  5. C4D R23插件:阿诺德渲染器C4DtoA
  6. 搭建DNS服务器,完成正向解析、反向解析、主从dns服务器完全区域传送和增量区域传送、批量解析
  7. mac:恢复出厂设置
  8. python爬取唐诗300首的诗名和对应的诗人存为Excel
  9. 小猿日记(11) - 单表亿级数据分表实战
  10. 【短视频运营】短视频剪辑 ④ ( 将文字转音频添加到视频中 | 编辑 TTS 音频信息 | 组合重叠人声音频添加 | 音频爆音处理 )