CSS3-使用边框和背景
<!-- 使用边框样式 --> <!-- border-width 设置边框宽度 --> <!-- border-style 设置绘制边框使用样式 --> <!-- border-color 设置边框使用颜色 --> <!-- 定义边框宽度 --> <!-- 可用属性: --> <!-- css度量单位,如em, px, cm --> <!-- <百分数> --> <!-- thin, medium, thick --> <style type = "text/css"> p { border-width: 10px; } </style> <!-- 定义边框样式 --> <!-- 可用属性: --> <!-- none 没有边框 (默认) --> <!-- dashed 破折线式边框 --> <!-- dotted 圆点线式边框 --> <!-- double 双线式边框 --> <!-- groove 槽线式边框 --> <!-- inset 内嵌效果边框 --> <!-- outset 外凸效果边框 --> <!-- ridge 脊线边框 --> <!-- solid 实线边框 --> <style type = "text/css"> p { border-style: outset; } </style> <!-- 为一条边应用边框样式 --> <!-- border-top-width --> <!-- border-top-style --> <!-- border-top-color --> <!-- border-bottom-width --> <!-- border-bottom-style --> <!-- border-bottom-color --> <!-- border-left-width --> <!-- border-left-style --> <!-- border-left-color --> <!-- border-right-width --> <!-- border-right-style --> <!-- border-right-color --> <style type = "text/css"> p { border-width: 5px; border-style: solid; border-color: black; border-left-width: 10px; border-left-style: dotted; border-top-width: 10px; border-top-style: dotted; } </style> <!-- 使用border简写属性 --> <!-- border: <宽度> <样式> <颜色> --> <!-- border-top: <宽度> <样式> <颜色> --> <!-- border-bottom: <宽度> <样式> <颜色> --> <!-- border-left: <宽度> <样式> <颜色> --> <!-- border-righr: <宽度> <样式> <颜色> --> <style type = "text/css"> p { border: medium outset green; border-top: 10px inset; } </style> <!-- 创建圆角边框 --> <!-- 可用属性: --> <!-- border-top-left-radius: --> <!-- border-top-right-radius: --> <!-- border-bottom-left-radius: --> <!-- border-bottom-right-radius: --> <!-- border-radius: --> <!-- 值可为 <长度值> <百分数> --> <style type = "text/css"> p { border: medium outset green; border-top-left-radius: 10px 5px; border-top-right-radius: 10px; } </style> <style type = "text/css"> p { border: medium outset green; border-radius: 10px / 5px; border-radius: 10px 10px 10px 10px / 5px 5px 5px 5px; } </style> <!-- 水平半径 / 垂直半径 --> <!-- 将图像用作边框 --> <!-- border-image-source: 设置图像来源 --> <!-- border-image-slice: 设置切分图像偏移 --> <!-- border-image-width: 设置图像边框的宽度 --> <!-- border-image-outset: 设置图像向外扩展的部分 --> <!-- border-image-repeat: 设置图像填充边框区域的模式,可为: stretch repeat round --> <!-- border-image: 简写属性 --> <!-- 目前 许多浏览器暂不支持该属性,一些浏览器支持但需要用厂商特定前缀 --> <style type = "text/css"> p { -webkit-border-image: url(icon.png) 30 / 50px; -moz-border-image: url(icon.png) 30 / 50px; -o-border-image: url(icon.png) 30 / 50px; } </style> <!-- 浏览器相应的厂商前缀 --> <!-- chrome safari -webkit- --> <!-- Opera -o- --> <!-- Firefox -moz --> <!-- Internet Explorer -ms- --> <!-- 控制切分图重复方式 --> <!-- border-image-repeat: stretch repeat round space --> <style type = "text/css"> p { -webkit-border-image: url(icon.png) 30 / 50px round repeat; -moz-border-image: url(icon.png) 30 / 50px round repeat; -o-border-image: url(icon.png) 30 / 50px round repeat; } </style> <!-- 设置元素的背景 --> <!-- background-color 背景颜色,显示在背景图像下面--> <!-- background-image 背景图像,如果指定一个以上图像,则后面图像绘制在前面图像的下面--> <!-- background-repeat 图像重复方式--> <!-- background-size 图像尺寸--> <!-- background-position 图像位置--> <!-- background-attachment 图像是否固定或随页面一起滚动--> <!-- background-clip 图像裁剪方式--> <!-- background-origin 图像绘制起始位置--> <!-- background 简写属性--> <!-- 设置背景图像和颜色 --> <style type = "text/css"> body { background-color: lightgray; background-image: url(pic.jpg); background-size: 40px 40px ; background-repeat: repeat-x ; background-attachment: fixed; } </style> <!-- background-repeat 可用属性 repeat-x, repeat-y, repeat, space, round, no-repeat --> <!-- background-size 可用属性: contain, cover, auto --> <!-- background-position 可用属性: top, left, right, bottom, center --> <!-- background-attachment 可用属性: fixed(背景固定在视窗上), --> <!-- local(背景随滚动条一起动), --> <!-- scroll(背景固定在元素上) --> <!-- background-origin 和 background-clip 可用元素 --> <!-- border-box 在边框盒子内部--> <!-- padding-box 在内边距盒子内部--> <!-- content-box 在内容盒子内部--> <!-- 使用background简写属性 --> <style type = "text/css"> table { background: lightgray top right no-repeat border-box content-box local url(); } </style> <!-- 有些浏览器还不支持这个 background 简写属性 --> <!-- 创建盒子阴影 --> <!-- box-shadow: --> <!-- box-shadow: hoffset voffset blur spread color inset --> <!-- hoffset 阴影水平偏移量,正值右移,负值左移 --> <!-- voffset 阴影垂直偏移量,正值下方,负值上方 --> <!-- blur (可选) 模糊值, 值越大越模糊,默认为0,边界清晰 --> <!-- spread (可选) 阴影延伸半径,正值扩大,负值缩小 --> <!-- color (可选) 阴影颜色 --> <!-- inset (可选) 将外部阴影设置为内部阴影 --> <!-- 可以在box-shadow中定义多个阴影,只需要用逗号隔开 --> <style type = "text/css"> table { box-shadow: 5px 4px 10px 2px gray; } </style> <style type = "text/css"> table { box-shadow: 5px 4px 10px 2px gray / 4px 4px 6px gray inset; } </style> <!-- 应用轮廓 --> <!-- 轮廓绘制在盒子边框的外面,轮廓不属于页面,应用轮廓不需要调整页面布局 --> <!-- outline-color: 外围轮廓颜色 --> <!-- outline-offset: 轮廓距离元素边框偏移量 --> <!-- outline-style: 轮廓样式 和 border-style一样 --> <!-- outline-width: 轮廓宽度 --> <!-- outline-color: 简写属性 --> <style type = "text/css"> table { outline-offset: 20px; outline-style: outset; outline-width: 3px; } </style>
相关推荐
百分比的值是相对于边框背景图片而言的,例如边框图片的大小是300px*240px,我们取百分比为25% 30% 15% 20%,那么它们实际对应的效果就是剪切了图片的60px 90px 36px 60px的四边大小。上下乘高,左右乘宽。 用法和...
CSS3背景、边框和边距相关属性演示案例,可以在我的博客中进行学习 https://blog.csdn.net/sujin_/article/details/86480055
5种简单好看的CSS3鼠标悬停文字边框背景动画特效,边框与背景从上、从下、从左、从右、从中间动画出现。
7套数据可视化源码和8套数据可视化大屏图片+自定义的部分border+css,非常酷炫,开箱即用,做大数据的可以使用哦
今天比较忙,没能好好看新东西,就记录一个常用的CSS3属性吧:box-shadow,表示阴影,如果设置了border-radius圆角,则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属性了。 语法: Formal ...
CSS实现自适应的图片背景边框
CSS 边框属性(Border 和 Outline) CSS 背景属性(Background) Color 属性 Box 属性 CSS 尺寸属性(Dimension) 内容生成(Generated Content) 可伸缩框属性(Flexible Box) Grid 属性 Hyperlink 属性 CSS 字体...
第17章 CSS边框与背景[上].pdf
代码片段: body{overflow:hidden;} /* ~~~~~~~ INIT. BTN ~~~~~~~ */ .btn { position: relative; padding: 1.4rem 4.2rem; padding-right: 3.1rem; font-size: 1.4rem; color: var(--inv);...}
css3和css,在编写code的时候,除了对一些css3中新出现的属性设置,其它完全一样。 CSS3新增属性 box-shadow(阴影效果) border-colors(为边框设置多种颜色) boder-image(图片边框) text-shadow(文本阴影) ...
内容极为全面、丰富和翔实,由浅入深地讲解了CSS3新特性的语法、功能和使用技巧,涵盖选择器、边框、背景、文本、颜色、UI、动画、新型盒模型、媒体查询、响应式设计等各种模块;写作方式创新,有趣且易懂,用图解的...
CSS实现自适应的图片背景边框.rar
使用css实现多种特效 全部效果: 1.默认三种主题:确认、取消、警告,适用于以下所有特效 2.流光效果:流光背景、流光边框 3.边框效果:双旋转边框、单旋转边框、呼吸效果边框 4.滑动效果:反光滑动、箭头滑动、中央...
7套数据可视化源码和8套数据可视化大屏图片+自定义的部分border+css,非常酷炫,开箱即用,做大数据的可以使用哦
添加背景,边框和文本颜色alpha的实用程序。 要求 > = v1.0.0 安装 通过NPM安装: npm i --save-dev tailwindcss-bg-alpha 通过YARN安装: yarn add tailwindcss-bg-alpha 用法 // tailwind.config.js module ...
CSS3使用了层叠样式表技术,可以对网页布局、字体、颜色、背景灯效果做出控制。css3作为css的进阶版,拆分和增加了盒子模型、列表模块、语言模块 、背景边框 、文字特效 、多栏布局等等。 CSS3的改变有很多,增加了...
CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多 栏布局等模块 [1] 。 CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新, 因此...
css+html制作带箭头的css边框,不用背景图片的带箭头的边框。