如何仿做网站,百度竞价 十一 pc网站 手机网站,c++培训,逻辑网络设计的目标是什么?文章目录 背景与边框半透明边框多重边框box-shadowoutline 背景定位background-positionbackground-origincalc() 条纹背景水平条纹 形状圆形圆柱自适应的椭圆半椭圆四分之一椭圆 背景与边框
半透明边框
目标#xff1a;给一个容器设置一层白色背景和一道半透明白色边框 写… 文章目录 背景与边框半透明边框多重边框box-shadowoutline 背景定位background-positionbackground-origincalc() 条纹背景水平条纹 形状圆形圆柱自适应的椭圆半椭圆四分之一椭圆 背景与边框
半透明边框
目标给一个容器设置一层白色背景和一道半透明白色边框 写法
border:10px solid hsla(0,0%,100%,.5);
background:white;效果 原因默认情况下背景会延伸到边框所在的区域下层所以在半透明白色边框处透出了这个容器自己的纯白实色背景实际效果跟纯白实色的边框完全一样。 解决background-clip属性的初始值是border-box意味着背景会被元素的border box边框的外沿框裁切掉。如果不希望背景侵入边框所在的范围需要把该值设为padding-box这样浏览器就会用内边距的外沿来把背景裁切掉
border:10px solid hsla(0,0%,100%,.5);
background:white;
background-clip:padding-box;多重边框
box-shadow
box-shadow接受第四个参数称作“扩张半径”通过指定正值或负值可以让投影面积加大或者减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值得到的“投影”其实就像一道实线边框
background:yellowgreen;
box-shadow:0 0 0 10px #655;box-shadow支持逗号分隔语法我们可以创建任意数量的投影。因此我们可以非常轻松地在上面的示例中再加上一道deeppink颜色的“边框”
background:yellowgreen;
box-shadow:0 0 0 10px #655, 0 0 0 15px deeppink;为“边框”的底下再加一层常规的投影
background:yellowgreen;
box-shadow:0 0 0 10px #655,0 0 0 15px deeppink,0 2px 5px 15px rgba(0,0,0,.6);⚠️注意 box-shadow是层层叠加的第一层投影位于最顶层所以在前面的代码中我们想在外圈再加一道5px的外框那就需要指定扩张半径的值为15px10px5px投影的行为跟边框border不一样它不影响布局也不受box-sizing属性的影响。不过你还是可以通过内边距或外边距这取决于投影是内嵌和还是外扩的来额外模拟出边框所需要占据的空间。上述方法所创建出的假“边框”出现在元素的外圈。它们并不会响应鼠标事件比如悬停或点击。如果这一点非常重要你可以给box-shadow属性加上inset关键字来使投影绘制在元素的内圈。请注意此时你需要增加额外的内边距来腾出足够的空隙。只能模拟实线边框 outline
如果只需要两层边框那就可以先设置一层常规边框再加上outline描边属性来产生外层的边框如果想得到上图【双重边框的效果】outline代码如下
background:yellowgreen;
border:10px solid #655;
outline:5px solid deeppink;outline可以模拟虚线边框outline-offset属性来控制它跟元素边缘之间的间距接受负值。对一层dashed虚线描边使用负的outline-offset后可以得到简单的缝边效果:
background:yellowgreen;
outline:5px dashed deeppink;
outline-offset: -15px;如下图所示
背景定位
background-position
目标针对容器某个角对背景图片做偏移定位比如让背景图片跟右边缘保持20px的偏移量同时跟底边保持10px的偏移量如下图所示背景图片即虚线框框出来的范围 解决办法background-position允许我们指定背景图片距离任意角的偏移量只要我们在偏移量前面指定关键字
background:url(code-pirate.svg) no-repeat #58a;
background-position:right 20px bottom 10px;问题在不支持background-position扩展语法的浏览器中背景图片会紧贴在左上角背景图片的默认位置而且它会干扰到文字的可读性因此需要在代码中提供一个回退方案把老套的bottom right定位值写进background的简写属性中即可
background:url(code-pirate.svg) no-repeat bottom right #58a;# 但是这种方式存在的问题是背景图片无法指定距离容器底部、右部的距离
background-position:right 20px bottom 10px;background-origin
目标针对容器某个角对背景图片做偏移定位且偏移量与容器的内边距一致比如容器内边距10px背景图片距离容器底部10px距离容器右边10px依前述代码应为
padding:10px;
background:url(code-pirate.svg) no-repeat #58a;
background-position:right 10px bottom 10px;问题每次改动内边距的值都需要在三个地方更新这个值能否让背景图片自动地跟着我们设定的内边距走不用另外声明偏移量的值 解决方案每个元素身上都存在三个矩形框border box边框的外沿框、padding box内边距的外沿框和content box内容区的外沿框。 默认情况下background-position是以padding box为准的这样边框才不会遮住背景图片。因此top left默认指的是padding box的左上角。我们可以使用background-origin来改变这种现象background-origin默认值为padding-box如果把它的值改成content-box那么在background-position属性中使用的边角关键字将会以内容区的边缘作为基准也就是说此时背景图片距离边角的偏移量就跟内边距保持一致了
padding:10px;
background:url(code-pirate.svg) no-repeat #58abottom right; /* 或 100% 100% */
background-origin:content-box;如果想让偏移量与内边距稍稍有些不同比如稍微收敛或超出那么可以在使用background-origin: content-box的同时再通过background-position的扩展语法来设置这些额外的偏移量。 calc()
目标把背景图片定位到距离底边10px且距离右边20px的位置。 解决方案如果我们仍然以左上角偏移的思路来考虑其实就是希望有一个100% -20px的水平偏移量以及100% -10px的垂直偏移量这里其实不太懂我理解为background-position: calc(100%) calc(100%);就是背景图片位于容器右下方然后各自向右边便宜20px向上偏移10px所以就是background-position:calc(100% - 20px)calc(100% - 10px);
background:url(code-pirate.svg) no-repeat;
background-position:calc(100% - 20px)calc(100% - 10px);⚠️注意在使用calc()时不要忘记在calc()函数内部的-和运算符的两侧各加一个空白符 条纹背景
水平条纹
目标使用css实现条纹 解决方案
生成等宽条纹
background:linear-gradient(#fb3 50%,#58a 50%);
background-size:100% 30px;
/* background-size:宽 高; */创建不等宽的条纹只需调整色标的位置值即可
background:linear-gradient(#fb3 30%,#58a 0);
background-size:100% 30px;
height: 200px;生成三种颜色的水平条纹
background:linear-gradient(#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);
background-size:100% 45px;
height: 200px;linear-gradient(颜色 颜色终止位置)那么linear-gradient(#fb3 20%,#58a 80%)表示容器顶部的20%区域被填充为#fb3实色底部20%区域被填充为#58a实色中间为二者过度区域 形状
圆形
容器宽高固定且相等为其设置border-radiusborder-radius的值大于等于容器宽高可以得到一个圆形
background:#fb3;
width:200px;
height:200px;
border-radius: 100px; /* 正方形边长的一半 */圆柱
容器宽高固定且不相等为其设置border-radiusborder-radius的值大于等于容器宽高可以得到一个圆柱
background:#fb3;
width:300px;
height:200px;
border-radius: 100px;自适应的椭圆
如果我们有一个尺寸为200px×150px的元素就可以把它圆角的两个半径值分别指定为元素宽高的一半从而得到一个精确的椭圆
background:#fb3;
width:200px;
height:150px;
border-radius: 100px /75px; /* 容器宽高的一半 */自适应的椭圆
background:#fb3;
width:200px;
height:150px;
border-radius: 50%; /* 圆角的宽高始终为容器宽高的一半 */半椭圆
目标 基础知识border-radius其实是一个简写属性。我们可以为元素的每个角指定不同的值
如果我们传给它四个值这四个值就会被分别从左上角开始以顺时针顺序应用到元素的各个拐角。如果只提供了三个值则意味着第四个值与第二值相同如果只有两个值则意味着第三个值与第一个相同
我们甚至可以为所有四个角提供完全不同的水平和垂直半径方法是在斜杠前指定14个值在斜杠后指定另外14个值。请注意这两组值是单独展开为四个值的。例如当border-radius的值为10px / 5px 20px时其效果相当于10px 10px 10px 10px / 5px20px 5px 20px。 还可以使用border-radius所对应的各个展开式属性border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius来指定各个角的大小 思路
这个形状是垂直对称的这意味着左上角和右上角的半径值应该是相同的与此类似左下角和右下角的半径值也应该是相同的。顶部边缘并没有平直的部分也就是说整个顶边都是曲线这意味着左上角和右上角的半径之和应该等于整个形状的宽度。基于前两条观察我们可以推断出左半径和右半径在水平方向上的值应该均为50%。再看看垂直方向似乎顶部的两个圆角占据了整个元素的高度而且底部完全没有任何圆角。因此在垂直方向上border-radius的合理值似乎就是100%100% 0 0。因为底部两个角的垂直圆角是零那么它们的水平圆角是多少就完全不重要了因为此时水平圆角总是会被计算为零。 实现方案border-radius:50% /100% 100% 0 0;
四分之一椭圆
