一款穿孔纸片样式的商品详情描述页面模板

使用css3 gradient实现的左边穿孔列，使用伪元素实现的双根红线。仿https://www.cgstud.io/。

html5, template

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1935
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.desc {
    background: #fff;
    line-height: 1.78em;
    font-size: 14px;
    box-shadow: 0 3px 5px #E2E2E2;
    margin: 30px auto;
    position: relative;
    background-image: -webkit-radial-gradient(#EFF1F5 21%, transparent 21%), -webkit-radial-gradient(hsla(0, 0%, 0%, .25) 21%, transparent 26%), -webkit-linear-gradient(top, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 95%, hsla(180, 25%, 50%, .1) 95%, hsla(180, 25%, 50%, .1) 100%);
    background-image: -moz-radial-gradient(#EFF1F5 21%, transparent 21%), -moz-radial-gradient(#EFF1F5 10%, transparent 12%), -moz-linear-gradient(top, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 95%, hsla(180, 25%, 50%, .1) 95%, hsla(180, 25%, 50%, .1) 100%);
    background-image: radial-gradient(#EFF1F5 21%, transparent 21%), radial-gradient(#EFF1F5 10%, transparent 12%), linear-gradient(top, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 95%, hsla(180, 25%, 50%, .1) 95%, hsla(180, 25%, 50%, .1) 100%);
    background-position: 6px 6px, 6px 5px, 50% 18px;
    background-repeat: repeat-y, repeat-y, repeat;
    background-size: 48px 48px, 48px 48px, 24px 24px;
    padding: 42px 24px 24px 84px;
}
.desc:after {
    border-left: 1px solid hsla(0, 75%, 50%, .2);
    border-right: 1px solid hsla(0, 75%, 50%, .2);
    bottom: 0;
    content: '';
    left: 58px;
    position: absolute;
    top: 0;
    width: 2px;
}

HTML

使用css3 gradient实现的左边穿孔列，使用伪元素实现的双根红线。仿https://www.cgstud.io/。

html5, template

编辑器支持Emmet

快捷键

使用css3 gradient实现的左边穿孔列，使用伪元素实现的双根红线。 仿https://www.cgstud.io/。

html5, template

一款HTML5/SVG斜条纹背景的电商商品详情和购买页面模板

一款响应式的产品引导页面模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

使用css3 gradient实现的左边穿孔列，使用伪元素实现的双根红线。仿https://www.cgstud.io/。