网页制作（HTML5+CSS3） 课件ch05盒子模型

盒子模型网页制作（HTML5+CSS3）1盒子模型网页制作（HTML5+CSS3）2教学模块边框线样式气泡对话框制作配套教材ISBN：盒子模型内容（Content）盒子模型内容（Content）内边距(Padding)盒子模型内容（Content）内边距(Padding)边框线(Border)盒子模型内容（Content）内边距(Padding)边框线(Border)外边距(Margin)外边距(Margin)盒子模型内容（Content）内边距(Padding)边框线(Border)互联网思维互联网思维认识边框三元素border-style边框样式border-width边框粗细边框颜色border-color定义边框样式相关属性属性名属性值用法border-stylesolid|dotted|dashed|double|noneborder-style:soliddoublesoliddouble;定义单边框样式contentborder-top-styleborder-right-styleborder-bottom-styleborder-left-style定义单边框样式contentborder-top-styleborder-right-styleborder-bottom-styleborder-left-style值复制原则div{border-style:solid;}contentsolidsolidsolidsolidsolid技巧：值复制原则当给定四个值时，分别对应上，右，下，左的顺序对应各边框线当给定一个值时，该值将应用到四条边上当给定两个值时，分别记为A,B，那么上下边框线取A值，左右边框线取B值当给定三个值时，分别记为A,B,C,那么上边框为A,右边框线为B,下边框线为C,左边框为B值复制原则contentdiv{border-style:dashedsolid;}dasheddashedsolidsolid值复制原则contentdiv{border-style:dashedsoliddotted;}dashedsoliddottedsolid定义边框宽度相关属性属性名属性值用法border-width像素或者%或者

thin、medium（默认值）和thick之一border-width:2px;定义边框颜色相关属性属性名属性值用法border-colorblue|rgb(25%,35%,45%)|#909090|transparentborder-color:redblue;透明：具有边框宽度，但是不可见定义边框颜色相关属性属性名属性值用法border-colorblue|rgb(25%,35%,45%)|#909090|transparentborder-color:redblue;1魔术1：变出三角形去除内容content21魔术1：变出三角形去除内容content将边框线设为粗(48px)，solid实线魔术1：变出三角形去除内容content将内容盒的宽度高度缩小到0将边框线设为粗(48px)，solid实线312123魔术1：变出三角形去除内容content将内容盒的宽度高度缩小到0将边框线设为粗(48px)，solid实线找不到三角形123魔术1：变出三角形去除内容content将内容盒的宽度高度缩小到0将边框线设为粗(48px)，solid实线412魔术1：变出三角形3去除内容content将内容盒的宽度高度缩小到0将边框线设为粗(48px)，solid实线对其余的三角形使用透明色12魔术1：变出三角形3去除内容content将内容盒的宽度高度缩小到0将边框线设为粗(48px)，solid实线对其余的三角形使用透明色4使用transparent透明色HTML部分CSS部分魔术2：气泡对话框HTML部分CSS部分魔术2：气泡对话框使用after伪类如何让三角居中典型错误分