输入一组基因做网络图的网站,网站建设结论与改进,世界比分榜,公司部门撤销员工不愿转岗怎么办闲来无事练习一下常见的css样式,希望大家能指点一二#xff01;1用css实现一个三角形#xff01;原理用border属性!实现它的原理那就要弄明白border属性#xff0c;border是一个复合属性border-width 指定边框的宽度border-style 指定边框的样式border-color 指定边框的…闲来无事练习一下常见的css样式,希望大家能指点一二1用css实现一个三角形原理用border属性!实现它的原理那就要弄明白border属性border是一个复合属性border-width 指定边框的宽度border-style 指定边框的样式border-color 指定边框的颜色inherit 指定从父元素继承的border属性CSS Border(边框) | 菜鸟教程www.runoob.com2写出几个宽高自适应的正方形!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle/* 都是像对于屏幕宽度的比例 */.square1 {width: 10%;height: 10vw;background: red;}/* margin/padding 百分比是相对父元素 width 的 */.square2 {width: 20%;height: 0;padding-top: 20%;background: orange;}/* 通过子元素 margin */.square3 {width: 30%;overflow: hidden;/* 触发 BFC */background: yellow;}.square3::after {content: ;display: block;margin-top: 100%;/* 高度相对于 square3 的 width */}/style
/head
!-- 画一个正方形 --body!-- div classsquare1/divdiv classsquare2/div --div classsquare3/div
/body/html第一种的原理都是相对于屏幕宽度的比例。第二种实现原理marginpadding的百分比都是相对于父元素的width。请看css注释会更清晰明了。3用css写一个扇形实现一个1/4的圆任意弧度的扇形!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle/* 通过 border 和 border-radius 实现 1/4 圆 */.sector1 {height: 0;width: 0;border: 100px solid;border-radius: 50%;border-color: turquoise tomato tan thistle;}/* 类似三角形的做法加上父元素 overflow: hidden; 也可以实现任意弧度圆 */.sector2 {height: 100px;width: 200px;border-radius: 100px 100px 0 0;overflow: hidden;}.sector2::after {content: ;display: block;height: 0;width: 0;border-style: solid;border-width: 100px 58px 0;border-color: tomato transparent;transform: translate(42px, 0);}/* 通过子元素 rotateZ 和父元素 overflow: hidden 实现任意弧度扇形此处是60° */.sector3 {height: 100px;width: 100px;border-top-right-radius: 100px;overflow: hidden;/* background: gold; */}.sector3::after {content: ;display: block;height: 100px;width: 100px;background: tomato;transform: rotateZ(-30deg);transform-origin: left bottom;}/* 通过 skewY 实现一个60°的扇形 */.sector4 {height: 100px;width: 100px;border-top-right-radius: 100px;overflow: hidden;}.sector4::after {content: ;display: block;height: 100px;width: 100px;background: tomato;transform: skewY(-30deg);transform-origin: left bottom;}/* 通过渐变设置60°扇形 */.sector5 {height: 200px;width: 200px;background: tomato;border-radius: 50%;background-image: linear-gradient(150deg, transparent 50%, #fff 50%),linear-gradient(90deg, #fff 50%, transparent 50%);}/style
/headbodydiv styledisplay: flex; justify-content: space-around;div classsector1/divdiv classsector2/divdiv classsector3/divdiv classsector4/divdiv classsector5/div/div
/body/html这个工作中不是能经常用到的就不详细注释了请谅解这篇文章就到这里 欢迎看一下篇css重中之重水平垂直居中和清除浮动
