HTML图片链接边框半透明,请教,下图登录页如何用css实现?半透明的边框怎么做?...
谢谢各位答主的答案,参考了下,然后去学习了下css3属性box-shadow和border-image,自己写的一个demo
登录页demo
1. 背景
div铺满整个屏幕,再给div添加背景图片以达到效果
.bg-div{
background: url('/img/bg2.jpg') center;
}
2. 头像
添加css样式,border-radius: 50%;
3. 边框
3.1 半三角:伪元素::after
一个div,顺时针旋转45度,三角的两边是div的上、左边框,after伪元素特性置于div的下方,不会遮挡住主体的div
.box::after {
content: '';
display: block;
width: 40px;
height: 40px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -21px;
border-top-left-radius: 4px;
border-left: 2px solid rgba(255,255,255, 0.3);
border-top: 2px solid rgba(255,255,255, 0.3);
transform: rotate(45deg); /*旋转45度*/*
box-shadow: inset 1px 0 0 rgba(255,255,255,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}
3.2 上边框:伪元素::before
伪元素before是一个400px*2px容器,分开的两边边框通过设置容器的box-shadow,左右内阴影
.box::before {
content: '';
display: block;
width: 400px;
height: 2px;
position: absolute;
border-top-left-radius: 4px;
box-shadow: inset 171px 0 0 0 rgba(255,255,255, 0.2), inset -171px 0 0 0 rgba(255,255,255, 0.2); /*通过内阴影实现边框效果*/
}
3.3 其余边框:border
.box{
border: 2px solid rgba(255,255,255, 0.2); /*增加半透明边框*/
border-top: 0; /*去掉上边框*/
}
4. 透明输入框
背景透明,边框半透明,添加内外渐变阴影
.form-input{
background: transparent; /*背景透明*/
border: 2px solid rgba(255,255,255,0.3); /*边框半透明*/
box-shadow: inset 0 0 4px rgba(255,255,255,0.2),0 0 4px rgba(255,255,255,0.2); /*内外渐变阴影*/
}
HTML图片链接边框半透明,请教,下图登录页如何用css实现?半透明的边框怎么做?...相关推荐
- 作着玩:登录页(纯css,不支持ie9以下)
作着玩:登录页(纯css,不支持ie9以下) 支持chrome FireFox 和 IE10+,(IE9也能显示,IE9以下不支持) <style type="text/css&quo ...
- 关于如何用css使盒子的边框做成圆角的问题
要实现圆角的效果其实很简单,用一个radius属性就行了.话不多说,直接上代码: <!DOCTYPE html> <html lang="en"><h ...
- php后台登录页修改成ajax,使用php后台给自己做一个页面路由,配合ajax实现局部刷新。(示例代码)...
今天就要放假了,把近来囤积的小玩意儿总结整理一下. 在请求一个html页面来嵌入到当前页会有一个问题,就是跟随请求过来的html他的样式表和脚本会失效.是因为文档加载的先后顺序等问题造成的.因此,加载 ...
- H5mui微信浏览器登录页
H5mui微信浏览器登录页 公司的H5手机的项目有时候需要做一些登录页 每次都要去找项目干脆直接发出来 页面基于Mui框架 头部的样式可能按照需要去更改就行了 一个背景图就OK的登录页 <!DO ...
- kindeditor 下图片链接取消边框
在项目中使用了 kindeditor,版本是4.1.10,在发布信息的时候,将图片设置成了超链接,在 IE8 或者其他个别浏览器下会自动的为图片加一个蓝色的边框,效果如下图: 这个蓝框可以通过修改信息 ...
- html去除图片链接边框及其链接虚线
转自 http://qiutian110119.blog.163.com/blog/static/5461731120130672423820/ html去除图片链接边框及其链接虚线 用图片做为链接后 ...
- [转]完美解决图片/链接虚线边框
完美解决图片/链接虚线边框 局部控制 <a href="/link1.htm" οnfοcus="this.blur()">link1</a& ...
- Typora自动转换图片链接
Typora将本地图片上传到图床 Typora将本地图片上传到图床 前言 工具 创建仓库 配置PicGo Typora配置PicGo服务 验证 Typora将本地图片上传到图床 养成习惯,先赞后看!! ...
- 图片链接生成器软件_推荐10个小众但是黑科技十足的Windows软件
推荐10个小众但是黑科技十足的Windows软件,每一个都是十分好用. 1:电脑图像工具箱 电脑图像工具箱是一款拥有70多个图片处理编辑功能的精品软件. 它支持图片微处理,动画制作,图像转换,图像浏览 ...
最新文章
- mybatis 配置_MyBatis教程3:优化MyBatis配置文件中的配置
- 在线机房改造类项目建设难点的研究
- 【深度学习】深入浅出卷积神经网络及实现!
- VMware Converter 使用图解
- MVC学习之简单的CRUD
- Gitee Pages 静态网页托管服务
- AlarmManager类的应用(实现闹钟功能)
- BugkuCTF-WEB题秋名山车
- 数字信号处理基础总结--7.28
- 7.程序员的自我修养---动态链接
- 基础学习笔记之opencv(2):haartraining前将统一图片尺寸方法
- 一个轻量级多功能免费开源web聊天室
- 丙二硫醇/鸟嘌呤(BG)/Mn配合物修饰BODIPY氟化硼二吡咯荧光探针
- 美国电话号码格式化的Objective-C代码
- 日立6TB充氦硬盘详细规格、实物照片
- java程序员 待遇_Java程序员之间薪资对比,为什么差距这么大?
- 机器视觉实验三 工件尺寸和面积测量
- 新版本七彩影视双端源码+支持三端/对接苹果CMS
- 我的一次创业经历--分享给希望创业的大学生们 .
- Python编程 | 系统编程 | 脚本运行上下文 | 标准流
热门文章
- WinForm之中BindingNavigator控件的使用
- DELL inspiron N4030安装XP遇到莫名自动断电的解决。
- 阿里技术四面+交叉面+HR面,成功拿到offer,双非本科进不了大厂?
- JS动态给变量取名字
- Jenkins Allure
- 用 Python 撸一个 Web 服务器-第1章:Web 开发简介
- Linux控制台下的快捷键
- Linux服务器搭建云盘,linux 搭建个人云盘Nextcloud
- 从《雷神3》洛基下落30分钟学英语时态
- 恢复计算机注册表命令,电脑的的注册表在恢复后又回到了被修改的老样子,怎么处理?...