CSS盒子模型——渐变问题(边框背景)
目录
一、边框渐变色
1、采用border-image(linear-gradient)设置边框颜色渐变实例
2、采用叠加方法设置边框颜色渐变实例
3、采用单层元素、background-clip、background-origin、background-image设置边框颜色渐变实例
二、背景渐变色
三、补充
一、边框渐变色
1、采用border-image(linear-gradient)设置边框颜色渐变实例
例:
<style>#d1{width: 300px;height: 300px;border:10px solid #ddd;border-image: linear-gradient(#D40, #07F) 1;}</style><body><div id="d1"></div></body>
相当于:
<style>#d1{width: 300px;height: 300px;border:10px solid #ddd;border-image-source: linear-gradient(#D40, #07F);border-image-slice: 1;}</style><body><div id="d1"></div></body>
浏览器效果:
ps:这种方法虽然简单但是不支持设置边框圆角border-radius。
2、采用叠加方法设置边框颜色渐变实例
思路:使用两个盒子叠加,给下层的盒子设置渐变色背景和 padding,给上层盒子设置纯色背景。(若要设置边框圆角,则可以分别对上下盒子进行圆角设置)
例:
<style>#d0{width: 300px;height: 300px;background: linear-gradient(to right,#D40, #07F);padding: 10px;border-radius: 10px;}#d1{height: 100%;background: #FFF;border-radius: 10px;}</style><body><div id="d0"><div id="d1"><div class="content"></div></div></div></body>
浏览器效果:
ps:这种方法容易理解且兼容性好,但是缺点是content的border-radius的设置会比较麻烦。
3、采用单层元素、background-clip、background-origin、background-image设置边框颜色渐变实例
思路:对单层元素分别设置 background-clip、background-origin、background-image 这三个属性,每个属性设置两组值,第一组用于设置border内的单色背景,第二组用于设置border上的渐变色。
例:
<style>#d0{width: 300px;height: 300px;border: 10px solid transparent; /*transparent是全透明色彩(是全透明黑色的速记),类似rgba(0,0,0,0)*/border-radius: 18px;background-clip: padding-box, border-box;background-origin: padding-box, border-box;background-image: linear-gradient(to right, #FFF, #FFF), linear-gradient(90deg, #D40, #07F);}</style><body><div id="d0"></div></body>
浏览器效果:
ps:圆角设置过小的话(<=15px),内部圆角与外部圆角看起来及其违和。
二、背景渐变色
例:
<style>#d1{width: 300px;height: 300px;background: linear-gradient(to right,#D40,#07F);}</style><body><div id="d1"></div></body>
浏览器效果:
参数:第一个参数控制渐变方向,比如 to left (由左向右)/right(由右向左)。第二个和第三个参数,分别是颜色起止颜色。
起止颜色是沿着渐变线,将会在指定位置(以百分比或长度设定)含有指定颜色的点。色彩的起止数是无限的。如果使用一个百分比位置,0%代表起点和100%是终点,但区域外的值可以被用来达到预期的效果。
例:
<style>#d1{width: 300px;height: 300px;background: linear-gradient(to right,#D40 70%,#07F);}</style><body><div id="d1"></div></body>
浏览器效果:
三、补充
需要熟悉常用浏览器的内核,CSS3的线性渐变多数时候需要考虑浏览器内核。
本文中均采用的是谷歌浏览器,其内核为webkit。
CSS盒子模型——渐变问题(边框背景)相关推荐
- CSS盒子模型、圆角边框、盒子/文字阴影
目录 CSS盒子模型 网页布局过程: 盒子模型(Box Model)组成 边框(border) 表格的细线边框 边框会影响盒子实际大小 内边距(padding) padding应用-新浪导航 编辑 ...
- html盒子左右边框边距,CSS盒子模型、内外边距、边框、行高、背景
1.盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...
- CSS 盒子模型、边框
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...
- CSS盒子模型/PS基操/圆角边框/盒子阴影/文字阴影/案例
CSS 03 1. 盒子模型 1.1 看透网页布局的本质 网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容 ...
- 10 CSS盒子模型+圆角边框+盒子阴影+文字阴影
1. 盒子模型 1.1 看透网页布局的本质 网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容. 网页布局的 ...
- css盒子模型(边框)
一..盒子模型(Box Model)组成 所谓盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器 CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素, ...
- CSS盒子模型之详解
前言: 盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局. 一.css盒子模型概念 CSS盒子模型 又称框模型 (Box Model) ,包 ...
- [css] 说说你对css盒子模型的理解
[css] 说说你对css盒子模型的理解 css盒模型由两个盒子组成,外在的控制是否换行的盒子,以及内在的控制元素内容的盒子.比如:display: inline-block, 则它的外在的盒子就是i ...
- CSS:盒子模型和清除float浮动的三种常用方法
目录 一:浮动产生原因: 二:浮动产生副作用: 三:浮动解决方法: QUESTION:CSS盒子模型清除浮动? ANSWER: 一:浮动产生原因: 一般浮动是什么情况呢?一般是一个盒子里使用了CSS ...
最新文章
- 2019-2020-3 《Java 程序设计》第三周知识总结
- 定制ListView的界面(使用自定义的列表项布局,一边显示水果图片,一边显示水果文字)以及ListView的点击事件
- 谈API网关的背景、架构以及落地方案--转
- 2021年程序员可以做哪些副业?
- python 画蜘蛛_如何学习 R 绘图?
- 澳大利亚新南威尔士大学 巩东博士 招收若干名计算机视觉和机器学习方向PhD...
- android 多点
- MySQL中的主键约束和外键约束
- Futter基础第8篇: 实现页面跳转、跳转传值(普通路由、普通路由传值)
- SSL协议之数据加密过程详解
- 如何批量转换图片格式?怎样统一修改图片格式?
- 初中高中睡前必看古诗名句
- echarts 横向条形图 对比
- 超级计算机还是超级烂尾?天河一号闲置近1年
- 2020春招 / 2021秋招阿里、腾讯、字节、快手、美团 JAVA 开发岗面试高频问题总结
- Dockerfile 定制 Rabbitmq 集成延时队列的镜像
- 南昌专门学计算机的技校,2019南昌技校计算机专业都学什么有哪些专业-江西技校都有什么专...
- IOS开发 阅读器类APP可用开源框架介绍(2)
- Jzoj5450【NOIP2017提高A组冲刺11.4】Neutral
- vbs执行相应的bat文件
热门文章
- C6000系列的外置flash的烧写流程
- kafka版本历史,含爱奇艺,小米,腾讯,阿里
- 程序免杀技术之——花指令
- bochs linux 安装软件,Centos 下安装 Bochs
- 快手Java后台三面,意向已拿,面试官都问了些啥?
- 【linux kernel】挂载根文件系统之rootfs
- linux上mybase输入中文,myBase Desktop 7.3.5 for linux 版无限试用
- 暴笑三国之网虫诸葛亮
- mybatis中关于example类详解mybatis的Example[Criteria]的使用
- 华为手机手指敲击两下屏幕或在屏幕画个圈截图操作技巧